皆さんはCSSは何使っていますか？
ふつうにcssファイルやbootstrapとかでレイアウトなんかいろいろありますがやはりレイアウトも効率的にしたいですよね？
Tailwindcssはclassにそのままコードを書くことで簡単に反映できるのでおすすめです。
例 （<div><classname=container "mt-5 bg-color-500"></div>）
上記だとマージンと背景色を変更しています。
今回はnpmでインストールから使用可能までの手順を紹介していますのでこの記事を読んで是非Tailwind.cssを使ってみてください！
１ npm install tailwind でインストール。
２ npx tailwindcss initでtailwindcssの設定ファイルを作成します。
３ npx tailwindcss initで作成したtailwind.config.jsでcontentの中に
"./src/**/*.{js,jsx,ts,tsx}", を加えて適応ファイルを加えて下さい。
４ index.cssにtailwindの基本スタイルを適応するため下記を記述
アットマークtailwind base;
アットマークtailwind components;
アットマークtailwind utilities;
５ tailwindを適応させたいコンポーネントかjsファイルに
import "./index.css"; をインポートすることでTailwindのスタイルを適応。
６ スタイルを当ててみてnpm startかnpm run devで開発サーバーを立ち上げて確認する。
＊もし上記の手順でスタイルの反映がうまくいかない場合は手動でビルドしてみる方法もあります。
その際は以下のコードを参照。
npx tailwindcss -i ./src/index.css -o ./src/output.css --watch
手順は以上になります。
Tailwind.cssを使うことでコードも少なくて済むうえにコンポーネント管理も容易になるので開発には是非おすすめです！
.jpg)
