workspace 使ったら cwd がいい感じになったっぽい

fsubal · Oct 15, 2023 · 0023d7a · 0023d7a
1 parent 0f02a1a
commit 0023d7a
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 22 deletions.
diff --git a/src/第3章_Tailwind_CSSを導入する/gulpfile.js b/src/第3章_Tailwind_CSSを導入する/gulpfile.js
@@ -6,9 +6,6 @@ const autoprefixer = require("autoprefixer");
 gulp.task("tailwindcss:build", () =>
   gulp
     .src("src/main.css")
-    // NOTICE: ここでtailwind.config.jsを明示的にrequireしているのは、
-    // プロジェクトルートにないtailwind.config.jsを使っているからです（説明の都合上フォルダを章ごとに分けております）
-    // tailwind.config.jsをふつうにプロジェクトルートに置いてるケースでは特に真似する必要はありません
-    .pipe(postcss([tailwindcss(require("./tailwind.config.js")), autoprefixer]))
-    .pipe(gulp.dest("../../dist")),
+    .pipe(postcss([tailwindcss, autoprefixer]))
+    .pipe(gulp.dest("./dist")),
 );
diff --git a/src/第3章_Tailwind_CSSを導入する/postcss.config.js b/src/第3章_Tailwind_CSSを導入する/postcss.config.js
@@ -2,6 +2,6 @@ const path = require("path");
 
 module.exports = {
   plugins: {
-    tailwindcss: { config: path.join(__dirname, "./tailwind.config.js") },
+    tailwindcss: {},
   },
 };
diff --git a/src/第3章_Tailwind_CSSを導入する/src/index.html b/src/第3章_Tailwind_CSSを導入する/src/index.html
@@ -7,6 +7,6 @@
     <link rel="stylesheet" href="./main.css" />
   </head>
   <body>
-    <div class="text-white"></div>
+    <div class="text-white bg-blue-600"></div>
   </body>
 </html>
diff --git a/src/第3章_Tailwind_CSSを導入する/webpack.config.js b/src/第3章_Tailwind_CSSを導入する/webpack.config.js
@@ -20,13 +20,7 @@ module.exports = {
             loader: "postcss-loader",
             options: {
               postcssOptions: {
-                plugins: [
-                  // NOTICE: ここでtailwind.config.jsを明示的にrequireしているのは、
-                  // プロジェクトルートにないtailwind.config.jsを使っているからです（説明の都合上フォルダを章ごとに分けております）
-                  // tailwind.config.jsをふつうにプロジェクトルートに置いてるケースでは特に真似する必要はありません
-                  require("tailwindcss")(require("./tailwind.config.js")),
-                  require("autoprefixer"),
-                ],
+                plugins: [require("tailwindcss"), require("autoprefixer")],
               },
             },
           },

diff --git a/src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/index.html b/src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/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 bg-blue-600"></div>
+  </body>
+</html>
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: ["../../index.html"],
+  content: ["./index.html"],
   theme: {
     extend: {},
   },

diff --git a/src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/tailwind.config.js b/src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/tailwind.config.js
@@ -12,13 +12,7 @@ const myColorTheme = require("./theme/myColorTheme");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: {
-    // NOTICE: ここでrelative: trueを指定しているのは、
-    // プロジェクトルートにないtailwind.config.jsを使っているからです（説明の都合上フォルダを章ごとに分けております）
-    // tailwind.config.jsをふつうにプロジェクトルートに置いてるケースでは特に真似する必要はありません
-    relative: true,
-    files: ["./index.html"],
-  },
+  content: ["./index.html"],
   theme: {
     colors: generateVarNames(myColorTheme.light),
     extend: {},