はじめに
ここ最近で流行しているtailwindcss。
基本的にはReactのプロジェクトに導入されているイメージがあります。
業務で、LP開発にtailwindcssを使用する機会ができたので導入方法を書き残したいと思います。
ディレクトリ構成
root
├─ docs
| └─css
| | └─style.css
| └─img
| └─index.html
|
├─ src
│ └─ css
| └─tailwind.css
|
└─ package-lock.json
└─ package.json
└─ tailwind.config.js
導入方法
- rootディレクトリに移動し、
npm initコマンドで初期化、-yをつけてpackage.jsonも同時に作りましょう。
$ npm init -y
- tailwindとその他構築に必要なモジュールをインストールします。
$ npm install tailwindcss@latest postcss@latest autoprefixer@latest
- tailwindを初期化し、
tailwind.config.jsファイルを生成します。
$ npx tailwindcss init
- 次に
srcフォルダを作成、その配下にcssフォルダを作成、そしてその中にtailwind.cssを作成して以下の内容を記述します。
@tailwind base;
@tailwind components;
@tailwind utilities;
- 最後に
docs内のcss/style.cssを指定してビルドすると、tailwindcssを扱うための内容が書き出されます。
$ npx tailwindcss-cli@latest build ./src/css/tailwind.css -o ./docs/css/style.css
これで導入は完了です。index.htmlファイル内でstyle.cssファイルを読み込んで試しにクラスを当ててみましょう。
スタイルが適用されるはずです。
また、この記事では書きませんが、tailwind.config.jsファイル内に特定の記述をすることでスタイルをカスタマイズすることが可能です。ぜひ調べてみてください。
サイトをデプロイする際は今のままではcssファイルの容量が大きいので、最終的には圧縮が必要になるでしょう。
今後そのような記事を書くかもしれません。