Reactプロジェクトで使ったので、インストール方法はメモします。Macのターミナルでのインストール方法です。
プロジェクトにTailwind CSSをインストールする。
まずはターミナルを開き、コマンド「cd」で読み込ませたいディレクトリに移動します。ディレクトリに移動したらインストールを行います。
npm install -D tailwindcss postcss autoprefixerそしてTailwindに必要なファイルを作成。このコマンドは tailwind.config.js と postcss.config.jsを作ります。
npx tailwindcss init -pTailwind CSSを使いたいファイルをtailwind.config.jsに記載する
どのファイルでTailwind CSSを使うか指定しないと使えません。
今回は下記のようにしました。content内でファイルを指定します。
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
ベースとなるCSSファイルでTailwindの各種パーツを読み込ませます。
記述の仕方は下記です。今回はReactインストール時にあるindex.cssに記述しました。
Tailwindのベース、コンポーネント、ユーティリティをインポートします。
@tailwind base;
@tailwind components;
@tailwind utilities;
開発をしていくと各コンポーネントでstyle.cssを作成するかもしれませんがプロジェクトのベースとなるcssファイルに記述をしておけば各コンポーネントのcssファイルには記述しなくても問題なく使えます。
なお、Tailwindをインポートするとブラウザで効いてるデフォルトCSSは全てリセットされます。CSSが何も効いてない状態になります。
ネストした記述を書くには？
Tailwind CSSはタグにクラスを指定が基本です。どうしてもScssのようにネストした書き方をしたい場合はSassをインストールすれば使うことができます。下記が参考です。
