wip

.github/workflows/ci.yml

@@ -25,5 +25,11 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: "npm"
       - run: npm ci
-      - run: npx run-s build:*
-      - run: npx run-s test:*
+      - run: npx run-s build:* > $GITHUB_WORKSPACE/build.log
+      - run: npx run-s test:* > $GITHUB_WORKSPACE/test.log
+
+      - run: |
+          if grep -q "warn - " <(cat $GITHUB_WORKSPACE/*.log); then
+            echo 'build has unexpected warning'
+            exit 1
+          end

package.json

@@ -6,6 +6,7 @@
     "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",
+    "build:plugins": "tailwindcss build --config src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/tailwind.config.js --input src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/main.css --output dist/main.css",
     "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",
     "test:vitest": "vitest run src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/vitest/preset.test.js"
   },

src/第3章_Tailwind_CSSを導入する/gulpfile.js

@@ -6,6 +6,9 @@ const autoprefixer = require("autoprefixer");
 gulp.task("tailwindcss:build", () =>
   gulp
     .src("src/main.css")
-    .pipe(postcss([tailwindcss("./tailwind.config.js"), autoprefixer]))
+    // NOTICE: ここでtailwind.config.jsを明示的にrequireしているのは、
+    // プロジェクトルートにないtailwind.config.jsを使っているからです（説明の都合上フォルダを章ごとに分けております）
+    // tailwind.config.jsをふつうにプロジェクトルートに置いてるケースでは特に真似する必要はありません
+    .pipe(postcss([tailwindcss(require("./tailwind.config.js")), autoprefixer]))
     .pipe(gulp.dest("../../dist")),
 );

src/第3章_Tailwind_CSSを導入する/tailwind.config.js

@@ -1,8 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: {
+    // NOTICE: ここでrelative: trueを指定しているのは、
+    // プロジェクトルートにないtailwind.config.jsを使っているからです（説明の都合上フォルダを章ごとに分けております）
+    // tailwind.config.jsをふつうにプロジェクトルートに置いてるケースでは特に真似する必要はありません
     relative: true,
-    files: ["src/index.html"],
+    files: ["./src/index.html"],
   },
   theme: {
     extend: {},

src/第3章_Tailwind_CSSを導入する/webpack.config.js

@@ -21,6 +21,9 @@ module.exports = {
             options: {
               postcssOptions: {
                 plugins: [
+                  // NOTICE: ここでtailwind.config.jsを明示的にrequireしているのは、
+                  // プロジェクトルートにないtailwind.config.jsを使っているからです（説明の都合上フォルダを章ごとに分けております）
+                  // tailwind.config.jsをふつうにプロジェクトルートに置いてるケースでは特に真似する必要はありません
                   require("tailwindcss")(require("./tailwind.config.js")),
                   require("autoprefixer"),
                 ],

src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/tailwind.config.js

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