TailWindCSSとは
TailWindCSSはBootStrap・Materialize CSSなどに代表するCSSフレームワークの一つです。 その特徴として、**Utility First**を掲げています。
TailWindCSS は BootStrap・Materialize CSS などに代表する CSS フレームワークの 1 つです。 その特徴として、Utility Firstを掲げています。
Utility Firstとは
Utility First とは、どういうことでしょう。 例えば、BootStrap の場合にはボタンを表示したい場合には次のようになります。
<button class="btn btn-primary">Button</button>btn というクラスが、あらかじめデザインされたコンポーネントを意味します。さらに、色を変更したい場合には、btn-primary を btn-danger・btn-success に変えたり、サイズを変更するために btn-lg を与えたりとある程度の拡張性ももっています。
他方で、TailWindCSS を用いて記述した場合には、次のようになります。
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Button</button>見て分かるとおり、btn のようなクラスは存在せずすべてがユーティリティクラスのみで構成されています。このようにユーティリティクラスを組み合わせて実装することになります。
そのため、他の CSS フレームワークと異なりカスタマイズ性が高いのが特徴です。
TailWindCSSの導入
npmプロジェクトの作成
TailWindCSS の導入に際して、npm または yarn を使います。まずは npm プロジェクトを作成します。
npm init -yパッケージのインストール
必要なものをいろいろインストールします。
npm install tailwindcss@latest postcss@latest autoprefixer@latest postcss-clipostcss・autoprefixer は必須ではありませんが、実際のプロジェクトでは PostCSS の plugin としてインストールすることがおすすめされています。
postcss.config.jsの作成
次に postcss.config.js を作成して、tailwindcss をプラグインとして追加します。
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}TailWindCSSの設定ファイルの作成
次に、TailWindCSS の設定ファイルである tailwind.config.js を作成します。 以下のコマンドを使用します。
npx tailwindcss initプロジェクトのルート配下に次のように作成されました。
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}TailWindCSSの読み込み
CSS ファイルを作成して、そこで TailWindCSS を読み込むようにします。 src フォルダに src/css/styles.css を作成しました。
/* src/styles.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";ビルド
それでは、TailwWindCSS を CSS にビルドしましょう。 package.json にビルドコマンドを追加します。
{
"name": "tailwind",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "NODE_ENV=production postcss src/css/styles.css -o src/public/compiled.css"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"autoprefixer": "^10.2.4",
"postcss": "^8.2.4",
"postcss-cli": "^8.3.1",
"tailwindcss": "^2.0.2"
}
}以下のコマンドを実行すると、src/public/compiled.css が作成されます。
npm run buildビルドの最適化
出力されたビルドファイルは、使用していないクラスも含めてすべてのユーティリティクラスが出力されるので、ファイルサイズがとても大きくなってしまいます。
TailWindCSS では、使用されていないクラスを検知してビルドファイルに含めないようにできます。
tailwind.config.js の purge オプションを変更します。
module.exports = {
- purge: [],
+ purge: [
+ './src/**/*.html',
+ './src/**/*.js',
+ ],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}本番ビルド時には、purge で指定されたファイルで使用されたクラスのみを出力するようになりました。
独自クラスの作成
ユーティリティクラスのみを使って記述する関係上、たくさんのクラスを HTML タグに付与する必要があるので読みづらくなったり、重複する箇所が出てきたりします。
そんなときは、@apply ディレクトリを使用することで独自クラスを作成できます。
src/css/styles.css に次のように追加します。
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
.btn-primary {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded
}
.btn-primary:hover {
@apply bg-blue-700
}@apply の後には、TailWindCSS のユーティリティクラスを記述します。 ここで作成したクラスは、次のように利用できます。
<button class="btn-primary">Button</button>
