Tailwind.cssの導入方法、すごく簡単だったのでやってみよう

最近Tailwind.cssを使ってみて、導入方法がとても簡単だったので紹介します。

nodeをインストールしている前提で行います。（nodeのインストールは別の記事で紹介します）

Tailwind.cssのインストール

yarnを使ってインストールします。

インストールと必要なファイルの用意

インストール

ターミナルでプロジェクトフォルダに移動した後以下のコマンドを実行すると、tailwind.cssのパッケージのインストールがインストールされます。

yarn add -D tailwindcss

設定ファイル「tailwind.config.js」を生成

その後、下記のコードを実行し、tailwind.cssの設定ファイル「tailwind.config.js」を生成します。
このファイルを通じて、Tailwind CSSの設定をカスタマイズできます。

yarn tailwindcss init

// tailwind.config.jsの中身
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

CSSファイルを用意

作成した設定ファイルを基に、Tailwind CSSのスタイルを適用するために、プロジェクトのCSSファイルに以下のようにインポートします。
Tailwind.cssを使って監視する対象になるCSSファイルを用意して、以下の3行を記載しておきます。

この時CSSファイル名を、実際に使うHTMLに読み込むCSSファイル名とは違うものにしておきましょう。

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind.cssの実行と、ファイル監視

Tailwind.cssはHTMLにクラス名書いて、書いたものだけをCSSファイルに出力する方法をとっているので、HTMLにクラス名を書いた後、Tailwind.cssを実行する必要があります。

実行のコマンドはこちら

yarn dev

ただ、これだと変更するたびにコマンドを打つ必要があるのでめんどくさい。
watchしましょう。

以下のコマンドを実行します。

yarn tailwindcss -i input.css -o output.css --watch

-iから始まる部分が、監視する対象のCSSファイル

-i input.css

-oから始まる部分が、監視対象のCSSファイルをトランスパイルして書き出すCSSファイルになります。
-oで指定しているCSSファイルをHTMLに読み込ませることでCSSが反映されます。

-o output.css

まとめ

とっても簡単でしたね！！

設定ファイルをカスタマイズして、PurgeCSSやPostCSSを入れるともっと便利になるのでおすすめです！

Tailwind.css公式サイト
https://tailwindcss.com/