注意
この記事は Tailwind CSS v2系向けに書いた記事です。最新の v3系のインストール記事も以下に書きましたのでご覧いただければ幸いです。
Tailwindをインストールするには、「npm経由でインストールする」場合と「CDNでTailwindのファイルを読み込む」場合の2通りのやり方があります。
ケース① npm経由でインストールする
まずは、Tailwindをインストールしたいフォルダを作成して、そのフォルダに移動しnpm initコマンドで初期化処理を行いましょう。-yフラグを使用してpackage.jsonファイルをさっと作成します。
$ npm init -y
TailwindやPostCSS、そのプラグインをインストールします。
$ npm install tailwindcss@latest postcss@latest autoprefixer@latest
続けて、構成ファイルを作成します。
$ npx tailwindcss init
するとルートフォルダの中に tailwind.config.jsが作成されます。
tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
次に、ルートディレクトリにsrcフォルダを作成して、その中にtailwind.cssを作成し以下のような内容で保存します。
src/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
そして、ビルドすると成型されたtailwindファイルが出力されます
$ npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css
./src/tailwind.cssが入力元のファイル、./dist/tailwind.cssが出力先のファイルになります。
ケース② CDN経由でTailwindを読み込む
「npm経由でやるのめんどくさい！」という方は、もちろんCDN経由でもTailwindを使用することが可能です。
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
上記コードを<head>内にペーストすれば完了です。
ただし、npmでインストールしてビルドされたTailwindのファイルと比較して、CDN経由で読み込まれたはファイルでは利用できない機能があります。
- Tailwindのデフォルトテーマをカスタマイズすることができない
- サードパーティ製のプラグインを導入できない
などです。CDN経由でのインストールでは少々制限がでてきますので。細かいところまで手が届くようなカスタマイズをしたい方は、是非npm経由でのインストールをお勧めします。