organize src and config

fsubal · Oct 15, 2023 · e2f2dd0 · e2f2dd0
1 parent 73082fe
commit e2f2dd0
Show file tree

Hide file tree

Showing 15 changed files with 58 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "description": "",
   "scripts": {
-    "build:cli": "tailwindcss build --input src/main.css --output dist/main.css",
+    "build:cli": "tailwindcss build --config src/第3章_Tailwind_CSSを導入する/tailwind.config.js --input src/第3章_Tailwind_CSSを導入する/src/main.css --output dist/main.css",
     "build:webpack": "webpack build --config src/第3章_Tailwind_CSSを導入する/webpack.config.js --progress",
     "build:gulp": "gulp tailwindcss:build --gulpfile src/第3章_Tailwind_CSSを導入する/gulpfile.js",
     "test:jest": "jest src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/jest/preset.test.js --config src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/jest/jest.config.js",

diff --git a/src/第3章_Tailwind_CSSを導入する/gulpfile.js b/src/第3章_Tailwind_CSSを導入する/gulpfile.js
@@ -5,7 +5,7 @@ const autoprefixer = require("autoprefixer");
 
 gulp.task("tailwindcss:build", () =>
   gulp
-    .src("../main.css")
-    .pipe(postcss([tailwindcss, autoprefixer]))
+    .src("src/main.css")
+    .pipe(postcss([tailwindcss("./tailwind.config.js"), autoprefixer]))
     .pipe(gulp.dest("../../dist")),
 );
diff --git a/src/第3章_Tailwind_CSSを導入する/src/index.html b/src/第3章_Tailwind_CSSを導入する/src/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tailwind CSS</title>
+    <link rel="stylesheet" href="./main.css" />
+  </head>
+  <body>
+    <div class="text-white"></div>
+  </body>
+</html>
diff --git a/src/main.css → src/第3章_Tailwind_CSSを導入する/src/main.css b/src/main.css → src/第3章_Tailwind_CSSを導入する/src/main.css
diff --git a/src/第3章_Tailwind_CSSを導入する/tailwind.config.js b/src/第3章_Tailwind_CSSを導入する/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: {
+    relative: true,
+    files: ["src/index.html"],
+  },
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/src/第3章_Tailwind_CSSを導入する/webpack.config.js b/src/第3章_Tailwind_CSSを導入する/webpack.config.js
@@ -4,7 +4,7 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 module.exports = {
   mode: "development",
   entry: {
-    tailwindcss: path.resolve(__dirname, "..", "main.css"),
+    tailwindcss: path.resolve(__dirname, "src", "main.css"),
   },
   output: {
     path: path.resolve(__dirname, "..", "..", "dist"),
@@ -20,7 +20,10 @@ module.exports = {
             loader: "postcss-loader",
             options: {
               postcssOptions: {
-                plugins: [require("tailwindcss"), require("autoprefixer")],
+                plugins: [
+                  require("tailwindcss")(require("./tailwind.config.js")),
+                  require("autoprefixer"),
+                ],
               },
             },
           },

diff --git a/src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/tailwind.config.js b/src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [],
+  content: ["../../index.html"],
   theme: {
     extend: {},
   },

diff --git a/src/index.html → ...CSSをカスタマイズする/7_4_独自のプラグインを作成する/index.html b/src/index.html → ...CSSをカスタマイズする/7_4_独自のプラグインを作成する/index.html
diff --git a/src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/main.css b/src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/main.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/...する/7_4_独自のプラグインを作成する/cssVariablePlugin.js → ...自のプラグインを作成する/plugins/cssVariablePlugin.js b/...する/7_4_独自のプラグインを作成する/cssVariablePlugin.js → ...自のプラグインを作成する/plugins/cssVariablePlugin.js
diff --git a/...をカスタマイズする/7_4_独自のプラグインを作成する/langPlugin.js → ...る/7_4_独自のプラグインを作成する/plugins/langPlugin.js b/...をカスタマイズする/7_4_独自のプラグインを作成する/langPlugin.js → ...る/7_4_独自のプラグインを作成する/plugins/langPlugin.js
diff --git a/...する/7_4_独自のプラグインを作成する/trimmedTextPlugin.js → ...自のプラグインを作成する/plugins/trimmedTextPlugin.js b/...する/7_4_独自のプラグインを作成する/trimmedTextPlugin.js → ...自のプラグインを作成する/plugins/trimmedTextPlugin.js
diff --git a/src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/tailwind.config.js b/src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/tailwind.config.js
@@ -0,0 +1,25 @@
+// @ts-check
+const { trimmedTextPlugin } = require("./plugins/trimmedTextPlugin");
+
+const {
+  defineVarNameInGlobalCss,
+  generateVarNames,
+} = require("./plugins/cssVariablePlugin");
+
+const { langPlugin } = require("./plugins/langPlugin");
+
+const myColorTheme = require("./theme/myColorTheme");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["src/index.html"],
+  theme: {
+    colors: generateVarNames(myColorTheme.light),
+    extend: {},
+  },
+  plugins: [
+    trimmedTextPlugin,
+    defineVarNameInGlobalCss(myColorTheme),
+    langPlugin,
+  ],
+};
diff --git a/...スタマイズする/7_4_独自のプラグインを作成する/myColorTheme.js → ...る/7_4_独自のプラグインを作成する/theme/myColorTheme.js b/...スタマイズする/7_4_独自のプラグインを作成する/myColorTheme.js → ...る/7_4_独自のプラグインを作成する/theme/myColorTheme.js
diff --git a/tailwind.config.js b/tailwind.config.js