TailwindCSS環境構築

はじめに

TailwindCSSはここ数年でversion upを繰り返しており、古い情報が溢れている気がする。
かくいう私も、古い情報に惑わされた。
2022. 6.20 時点でのセットアップ方法を紹介しようと思う

まず公式HP
.jpと.comの2種類があるが、絶対.comを参考にして欲しい。
.jpは情報が圧倒的に古い そもそもまだ更新されてるのかあれ？
私は運悪く.jpを最初に引いてしまい、古いversionの情報を眺めて時間を無駄にしてしまった。

環境

M1 Macbook Air
VS code

セットアップ手順

1. npmを初期化する
   npm ini -y
2. 必要なパッケージをインストール
   npm install -D tailwindcss postcss-cli autoprefixer
3. post cssとtailwindCSSの設定ファイルを生成
   npx tailwindcss init -p
4. ビルドする
   npm run dev 設定ファイルを全て記述した後に行う

事前知識

PostCSS

tailwindCSSはpostcssを使って使用することを推奨している。
post cssがわからない方は下記を参照

簡単にまとめると、PostCSSという大枠を用意して、他はそのプラグインとして使用することができる
今回の場合tailwindcssとautoprefixerの2つがプラグインとして存在することになる

npm

tailswindCSSを使いたいと思い至った皆様ならないと思うが、npmを使ったことがない人は下記を参照

ちょっと情報量が多い+古い記事なのでざっと眺めてください

その後私の記事をみて、必要最低限なコマンドの知識を再確認してください

設定ファイル

postcss.config.js

// postcssの設定ファイル
// インストールしたプラグインで、使用したいものを記述する
// 基本的にファイル生成時に自動でインストールしたプラグインが列挙される
// 後から追加する場合は手動で記入する必要がある
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

// tailwindcssの設定ファイル
// tailwindcssを使用するhtmlファイルのpathを記述
content: ["./index.html"],

package.json

// buildタスクを設定

// 対象のpath -o 出力先のpath watchモード
"dev": "postcss style.css -o dist.css -w",

css

css

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

html

適当に下記のclassでtailwindcssが動くか確認
dist.cssを読み込んでくださいね

index.html

<h1 class="text-6xl text-blue-700 font-bold">TailwindCSS</h1>

拡張機能

@tailwind base; 等に構文エラーが表示されると思います。 下記拡張機能で解決しましょう

htmlにclassを明記する際保管してくれる拡張機能は下記

終わりに

Tailwindcssの利用にはnpmやpostCSSの知識が少し必要です。
初めにそちらの知識を蓄えてから挑戦した方がスムーズに理解できるかと思います。