Tailwindcssは２種類使い方がある。
Tailwindcssは２種類使い方がある。
- CDNから読み込む
- ビルドして利用する
- nodejsを利用する
- ビルドすることにより、必要最低限のCSSができあがり、サイトへのアクセス速度が早くなる
ビルドして利用するために、ローカルにTailwindcssの環境を作る.
Laravelの最新版へのTailwindcssの導入方法公式
Laravelの最新版へのTailwindcssの導入方法は、Tailwindcssの公式ページに載っている
しかしながらいま僕が勉強で使っているLaravel7については載っていない。
※Laravel7は2022年11月28日でサポートが終了しているので、本番で使わないように！
Laravel7へのTailwindcss導入方法は？
そこで疑問が湧いたが、
TailwindのsrcなどのディレクトリはLaravelのフォルダのどこに配置すれば良いのか？
調べたので以下に手順をメモする。
TailwindcssをLaravel7に導入する手順
上述の答え：
Laravelのプロジェクトフォルダ直下で作成していけば良い。
以下、手順。
tailwindcssを導入する。
ローカル環境で、（サーバー環境でも良いが）
Laravelのプロジェクトフォルダ直下で、
npm install tailwindcss
↓
Laravelのプロジェクトフォルダ直下で、
Tailwind CSSの設定ファイルtailwind.config.jsを作成。
npx tailwindcss init
↓
resources/sass/app.scss
を編集。
以下を追記する。
@tailwind base;
@tailwind components;
@tailwind utilities;
↓
/tailwind.config.js を編集。
module.exports = {
purge: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}
purge: [
の中に記述するPathは、未使用のClassを削除するPathを指定している。
↓
webpack.mix.jsファイルを編集する。
Laravel Mixを使ってTailwind CSSをビルドするように設定します。このファイルもプロジェクトのルートディレクトリにあります。
(→Bing AI)
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('resources/js/app.js', 'public/js').vue
.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
});
↓
ビルド実行。
npm run dev
ここで「.vue」をつけておらず以下のエラーが出た。
（webpack.mix.jsファイルの内容は上述の通りで大丈夫だよ。.vue付いているからね。）
ERROR in ./resources/js/components/ExampleComponent.vue
↓
Qiita見て、.vueを追記して、再度npm run dev して、解決
↓
- resources/sass/app.scss
が作成されてればオッケーだぜ！
参考
ちなみにcssをビルドするコマンド：
npm run dev
→開発用ビルド
npm run watch
→自動ビルド
npm run build
→本番用ビルド
コメント