beautiful works with tailwind webpack
This commit is contained in:
@@ -74,13 +74,18 @@
|
||||
"@typescript-eslint/eslint-plugin": "^5.0.0",
|
||||
"@typescript-eslint/parser": "^5.0.0",
|
||||
"@vercel/webpack-asset-relocator-loader": "1.7.0",
|
||||
"autoprefixer": "^10.4.4",
|
||||
"css-loader": "^6.0.0",
|
||||
"electron": "17.1.2",
|
||||
"eslint": "^8.0.1",
|
||||
"eslint-plugin-import": "^2.25.0",
|
||||
"fork-ts-checker-webpack-plugin": "^6.0.1",
|
||||
"mini-css-extract-plugin": "^2.6.0",
|
||||
"node-loader": "^2.0.0",
|
||||
"postcss": "^8.4.12",
|
||||
"postcss-loader": "^6.2.1",
|
||||
"style-loader": "^3.0.0",
|
||||
"tailwindcss": "^3.0.23",
|
||||
"ts-loader": "^9.2.2",
|
||||
"typescript": "~4.5.4"
|
||||
},
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
plugins: [require("tailwindcss"), require("autoprefixer")],
|
||||
};
|
||||
@@ -4,7 +4,10 @@ import * as React from "react";
|
||||
import * as ReactDOM from "react-dom";
|
||||
|
||||
function render() {
|
||||
ReactDOM.render(<h2>Hello from React!</h2>, document.getElementById("root"));
|
||||
ReactDOM.render(
|
||||
<h2 className="text-sm bg-black">Hello from React!</h2>,
|
||||
document.getElementById("root")
|
||||
);
|
||||
}
|
||||
|
||||
render();
|
||||
|
||||
@@ -4,5 +4,8 @@ body {
|
||||
margin: auto;
|
||||
max-width: 38rem;
|
||||
padding: 2rem;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
content: ["./src/**/*.{js,jsx,ts,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
@@ -3,12 +3,12 @@ module.exports = {
|
||||
* This is the main entry point for your application, it's the first file
|
||||
* that runs in the main process.
|
||||
*/
|
||||
entry: './src/index.ts',
|
||||
entry: "./src/index.ts",
|
||||
// Put your normal webpack config below here
|
||||
module: {
|
||||
rules: require('./webpack.rules'),
|
||||
rules: require("./webpack.rules"),
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
|
||||
extensions: [".js", ".ts", ".jsx", ".tsx", ".css", ".json"],
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
|
||||
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
|
||||
|
||||
module.exports = [new ForkTsCheckerWebpackPlugin()];
|
||||
|
||||
@@ -1,9 +1,24 @@
|
||||
const rules = require('./webpack.rules');
|
||||
const plugins = require('./webpack.plugins');
|
||||
const rules = require("./webpack.rules");
|
||||
const plugins = require("./webpack.plugins");
|
||||
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
|
||||
const path = require("path");
|
||||
|
||||
rules.push({
|
||||
test: /\.css$/,
|
||||
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
|
||||
use: [
|
||||
{ loader: "style-loader" },
|
||||
{ loader: "css-loader" },
|
||||
{
|
||||
loader: "postcss-loader",
|
||||
options: {
|
||||
postcssOptions: {
|
||||
config: path.join(__dirname, "postcss.config.js"),
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
module.exports = {
|
||||
@@ -12,6 +27,6 @@ module.exports = {
|
||||
},
|
||||
plugins: plugins,
|
||||
resolve: {
|
||||
extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
|
||||
extensions: [".js", ".ts", ".jsx", ".tsx", ".css"],
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,18 +1,21 @@
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
const path = require("path");
|
||||
|
||||
module.exports = [
|
||||
// Add support for native node modules
|
||||
{
|
||||
// We're specifying native_modules in the test because the asset relocator loader generates a
|
||||
// "fake" .node file which is really a cjs file.
|
||||
test: /native_modules\/.+\.node$/,
|
||||
use: 'node-loader',
|
||||
use: "node-loader",
|
||||
},
|
||||
{
|
||||
test: /\.(m?js|node)$/,
|
||||
parser: { amd: false },
|
||||
use: {
|
||||
loader: '@vercel/webpack-asset-relocator-loader',
|
||||
loader: "@vercel/webpack-asset-relocator-loader",
|
||||
options: {
|
||||
outputAssetBase: 'native_modules',
|
||||
outputAssetBase: "native_modules",
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -20,7 +23,7 @@ module.exports = [
|
||||
test: /\.tsx?$/,
|
||||
exclude: /(node_modules|\.webpack)/,
|
||||
use: {
|
||||
loader: 'ts-loader',
|
||||
loader: "ts-loader",
|
||||
options: {
|
||||
transpileOnly: true,
|
||||
},
|
||||
|
||||
@@ -3350,6 +3350,18 @@ autoprefixer@^10.4.2:
|
||||
picocolors "^1.0.0"
|
||||
postcss-value-parser "^4.2.0"
|
||||
|
||||
autoprefixer@^10.4.4:
|
||||
version "10.4.4"
|
||||
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.4.tgz#3e85a245b32da876a893d3ac2ea19f01e7ea5a1e"
|
||||
integrity sha512-Tm8JxsB286VweiZ5F0anmbyGiNI3v3wGv3mz9W+cxEDYB/6jbnj6GM9H9mK3wIL8ftgl+C07Lcwb8PG5PCCPzA==
|
||||
dependencies:
|
||||
browserslist "^4.20.2"
|
||||
caniuse-lite "^1.0.30001317"
|
||||
fraction.js "^4.2.0"
|
||||
normalize-range "^0.1.2"
|
||||
picocolors "^1.0.0"
|
||||
postcss-value-parser "^4.2.0"
|
||||
|
||||
aws-sign2@~0.7.0:
|
||||
version "0.7.0"
|
||||
resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
|
||||
@@ -3699,6 +3711,17 @@ browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.6, browserslist@^4
|
||||
node-releases "^2.0.2"
|
||||
picocolors "^1.0.0"
|
||||
|
||||
browserslist@^4.20.2:
|
||||
version "4.20.2"
|
||||
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.2.tgz#567b41508757ecd904dab4d1c646c612cd3d4f88"
|
||||
integrity sha512-CQOBCqp/9pDvDbx3xfMi+86pr4KXIf2FDkTTdeuYw8OxS9t898LA1Khq57gtufFILXpfgsSx5woNgsBgvGjpsA==
|
||||
dependencies:
|
||||
caniuse-lite "^1.0.30001317"
|
||||
electron-to-chromium "^1.4.84"
|
||||
escalade "^3.1.1"
|
||||
node-releases "^2.0.2"
|
||||
picocolors "^1.0.0"
|
||||
|
||||
bser@2.1.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz"
|
||||
@@ -3873,6 +3896,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001297, caniuse-lite@^1.0.30001313:
|
||||
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001314.tgz"
|
||||
integrity sha512-0zaSO+TnCHtHJIbpLroX7nsD+vYuOVjl3uzFbJO1wMVbuveJA0RK2WcQA9ZUIOiO0/ArMiMgHJLxfEZhQiC0kw==
|
||||
|
||||
caniuse-lite@^1.0.30001317:
|
||||
version "1.0.30001317"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001317.tgz#0548fb28fd5bc259a70b8c1ffdbe598037666a1b"
|
||||
integrity sha512-xIZLh8gBm4dqNX0gkzrBeyI86J2eCjWzYAs40q88smG844YIrN4tVQl/RhquHvKEKImWWFIVh1Lxe5n1G/N+GQ==
|
||||
|
||||
case-sensitive-paths-webpack-plugin@^2.4.0:
|
||||
version "2.4.0"
|
||||
resolved "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz"
|
||||
@@ -5181,6 +5209,11 @@ electron-to-chromium@^1.4.76:
|
||||
resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.82.tgz"
|
||||
integrity sha512-Ks+ANzLoIrFDUOJdjxYMH6CMKB8UQo5modAwvSZTxgF+vEs/U7G5IbWFUp6dS4klPkTDVdxbORuk8xAXXhMsWw==
|
||||
|
||||
electron-to-chromium@^1.4.84:
|
||||
version "1.4.86"
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.86.tgz#90fe4a9787f48d6522957213408e08a8126b2ebc"
|
||||
integrity sha512-EVTZ+igi8x63pK4bPuA95PXIs2b2Cowi3WQwI9f9qManLiZJOD1Lash1J3W4TvvcUCcIR4o/rgi9o8UicXSO+w==
|
||||
|
||||
electron-winstaller@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/electron-winstaller/-/electron-winstaller-5.0.0.tgz#0db968f34d498b16c69566a40848f562e70e7bcc"
|
||||
@@ -6019,7 +6052,7 @@ forwarded@0.2.0:
|
||||
resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz"
|
||||
integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
|
||||
|
||||
fraction.js@^4.1.2:
|
||||
fraction.js@^4.1.2, fraction.js@^4.2.0:
|
||||
version "4.2.0"
|
||||
resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz"
|
||||
integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
|
||||
@@ -8379,6 +8412,13 @@ mini-css-extract-plugin@^2.4.5:
|
||||
dependencies:
|
||||
schema-utils "^4.0.0"
|
||||
|
||||
mini-css-extract-plugin@^2.6.0:
|
||||
version "2.6.0"
|
||||
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.0.tgz#578aebc7fc14d32c0ad304c2c34f08af44673f5e"
|
||||
integrity sha512-ndG8nxCEnAemsg4FSgS+yNyHKgkTB4nPKqCOgh65j3/30qqC5RaSQQXMm++Y6sb6E1zRSxPkztj9fqxhS1Eo6w==
|
||||
dependencies:
|
||||
schema-utils "^4.0.0"
|
||||
|
||||
minimalistic-assert@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz"
|
||||
@@ -9405,7 +9445,7 @@ postcss-load-config@^3.1.0:
|
||||
|
||||
postcss-loader@^6.2.1:
|
||||
version "6.2.1"
|
||||
resolved "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz"
|
||||
resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-6.2.1.tgz#0895f7346b1702103d30fdc66e4d494a93c008ef"
|
||||
integrity sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==
|
||||
dependencies:
|
||||
cosmiconfig "^7.0.0"
|
||||
@@ -9743,6 +9783,15 @@ postcss@^8.3.5, postcss@^8.4.4, postcss@^8.4.6, postcss@^8.4.7, postcss@^8.4.8:
|
||||
picocolors "^1.0.0"
|
||||
source-map-js "^1.0.2"
|
||||
|
||||
postcss@^8.4.12:
|
||||
version "8.4.12"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905"
|
||||
integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==
|
||||
dependencies:
|
||||
nanoid "^3.3.1"
|
||||
picocolors "^1.0.0"
|
||||
source-map-js "^1.0.2"
|
||||
|
||||
prelude-ls@^1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
|
||||
|
||||
Reference in New Issue
Block a user