tailwind+viteでcolorクラスが吐かれなくなった

起こったこと

Laravelを使った開発で、デザイン会社から上がってきたデザインを適用していました。

register.blade.php

必須の文字が白くならない！

原因調査

tailwind+viteが動かないことはよくあるのでググります。

tailwind vite not working

よくある問題は、

• npm run devを動かしてない
• 必要なモジュール(postcss,autoprefixer)が足りてない
• classを探索する先が間違えてる

とかですが、全然だめ。

npx tailwindcss -i ./resources/css/app.css -o ./public/css/app.css --minify

でcssを吐き出してみてもtext-whiteが無い。

解決編

tailwind.config.js

import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],
/** ★デザイン会社からもらったものを貼り付けた(つもり)  */
    theme: {
        fontFamily: {
            sans: ['Arial', 'ヒラギノ角ゴ Pro', 'system-ui', 'sans-serif'],
        },
        colors: {
            'basecolor': '#dc000c',
        }
    },
/** ここまで */
    plugins: [forms],
};

themaの部分はデザイン会社からもらったのを貼り付けた。
が、消してみると動いた。

よく見ると違っていて、

tailwind.config.js

import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],
    theme: {
+        extend: {
            fontFamily: {
                sans: ['Arial', 'ヒラギノ角ゴ Pro', 'system-ui', 'sans-serif'],
            },
            colors: {
                'basecolor': '#dc000c',
            }
+        }
    },
    plugins: [forms],
};

extend: {}になってなかった！

デフォルトのテーマを拡張する
テーマ オプションのデフォルト値を保持しつつ、新しい値も追加したい場合は、theme.extend設定ファイルのキーの下に拡張機能を追加します。このキーの下の値は既存のtheme値とマージされ、使用できる新しいクラスとして自動的に利用可能になります。

extendをつけてないと上書きされて他のcolorが使えなくなってしまったのが原因でした。

あまりにしょうもないのと長時間ハマったので共有します。