# Tailwind CSSを触ってみる・あらすじ ## インストール手順 ```bash= npm install tailwindcss@latest postcss@latest autoprefixer@latest ``` 以下のコマンドでtailwind.config.jsを作成する ```bash= npx tailwindcss init ``` コンフィグの詳細な説明　→　https://tailwindcss.com/docs/configuration styles.cssを作成する ```css= @tailwind base; @tailwind components; @tailwind utilities; ``` tailwind cliでビルドする ```bash= npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css ``` 本番用ビルドはコマンドの前に環境変数を指定する ```bash= NODE_ENV=production tailwindcss-cli@latest build ... ``` ## どんな種類のユーティリティクラスがあるのか？ 数が膨大なのでドキュメントを見るべし https://tailwindcss.com/docs/container ## ビルドする意味 すでにあるユーティリティクラスを組み合わせて新しいユーティリティクラスを定義できる `@apply`ディレクティブで既存のユーティリティクラスを独自のカスタムCSSにインライン化する ## ディレクティブの種類 * @layer * カスタムスタイルが属するレイヤーを指定する（出力順を制御するために使用する） * @variants * hover:やfocus:などの状態バリアントを生成する * @responsive * sm:やmd:などのレスポンシブバリアントを生成する * @screen * メディアクエリのサイズ指定をsmやmdなどの指定で行える ## 状態バリアントとは？ hoverやfocusした際に適応されるクラスを以下のように指定できる ```html <button class="bg-purple-600 hover:bg-purple-700 focus:outline-none ``` この前置詞(`hover:`, `focus:`)が状態バリアント ## theme関数について Tailwind config valuesを取得する関数 theme()関数 ## Tailwindのコツ JavaScriptコンポーネントを作るほどでもない小さなコンポーネントをTailwindの@applyで定義するとやりやすい。 ## コンポーネントプラグインについて tailwind.config.jsで定義する Tailwindコンポーネントをライブラリとして公開する場合などに便利 ## ダークモードについて OS(ブラウザ？）でダークモードを指定していると以下のメディアクエリが有効になる Tailwindはこの仕組みを使用してダークモード時のバリアントを生成できる ```css @media (prefers-color-scheme: dark) { /** ダークモード時のCSSを記述する **/ } ``` Tailwindでダークモードをサポートするには`tailwind.config.js`に`darkMode`を設定する ```javascript module.exports = { darkMode: 'media', // ... } ``` * 'media' * メディアクエリにしたがってダークモードに切り替える * 'class' * 手動で切り替える 手動で切り替える場合はhtmlタグにclass="dark"をつける