Tailwind CSS JITとlaravel-mixでコーディングを最速で開始する

最速で静的コーディングを始めるgitリポジトリを用意しました。

以下のコマンドをターミナルで実行するだけです。指定したプロジェクト名（static-site-projectの部分）は生成されるディレクトリ名になるので管理するのにふさわしいプロジェクト名などにして実行するのが望ましいです。

git clone https://github.com/YutoSeta/static-site-template.git static-site-project
cd static-site-project
npm install
npx mix watch

上記コマンドでプロジェクトファイルを精製して、実行すれば、index.htmlにいきなり記述すればプロジェクトの開発がはじめられます。
適宜使いやすくカスタマイズすることもできます。
あくまで今回は最短でtailwind cssを使った静的プロジェクトの開発に取り掛かれるように記事を書いています。

ここからは先ほど紹介したリポジトリで行っていることの解説です（無視しても構いません）

laravel-mixでtailwlnd cssのコンパイル環境を整える。

npm init -y
npm install -D laravel-mix tailwindcss@latest postcss@latest autoprefixer@latest
touch webpack.mix.js tailwind.config.js

webpack.mix.jsに以下のように記述する。

//webpack.mix.js
const mix = require('laravel-mix');
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.postCss("resources/styles/_app.css", "resources/styles/app.css", [
        require("tailwindcss"),
]);

tailwind.config.jsに以下を記述する。今回は最新の機能であるJITコンパイラを活用する。

//tailwind.config.js
module.exports = {
    purge: [
        './index.html',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    mode: 'jit',
}

以下のコマンドでコンパイルして開発を開始する。自動でHTMLのクラスから適切なCSSを自動生成してくれる。CSSの記述は一切不要。

npx mix watch

あとは、index.htmlで表示確認しながら開発を進めてください。ファイルを変更するごとに自動的にHTML上のクラス名から最適なCSSを生成してくれます。

最高の開発者体験です！ぜひ、一度は体験してみてください！

AlpineJSも一緒につかえるgitリポジトリも用意しています

以下のコマンドをターミナルで実行するだけです。指定したプロジェクト名（alptail-site-projectの部分）は生成されるディレクトリ名になるので管理するのにふさわしいプロジェクト名などにして実行するのが望ましいです。

git clone https://github.com/YutoSeta/alptail-site-template.git alptail-site-project
cd alptail-site-project
npm install
npx mix watch