Tailwind CSSの導入と設定
既存のアプリに導入したり、静的なサイト用に導入します。バージョンはv3です。
ReactやNextアプリに導入する
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
- tailwind.config.js
Nextのバージョンによってはディレクトリ構成が変わるので注意（"./src〜"が不要だったり）
/** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", // Or if using `src` directory: "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }
※ビルド時に、contentに設定したファイルをチェックして計量化されたCSSが出力されます。（v2でいうpurge）
- グローバルに利用するCSS（globals.cssなど）に追加
@tailwind base; @tailwind components; @tailwind utilities;
静的サイト用に導入する（HTML、JSに動作させる）
srcからpublicに出力します。
npm install -D tailwindcss npx tailwindcss init
- tailwind.config.js
/** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }
- src/style.cssに追加
@tailwind base; @tailwind components; @tailwind utilities;
- 作成用にwatch
npx tailwindcss -i ./src/style.css -o ./public/style.css --watch
- src/index.htmlでCSSを読み込ませる
<link rel="stylesheet" href="/public/style.css">
※public以下を設置する場合は、ビルド後のhrefパスに注意（gulpに組み込むなら設定しておく）