👩💻
ReactアプリにTailwind CSS導入
Tailwind CSS導入する理由
CSSでデザインを付けていくと、微調整等に時間を費やしてしまうことがあるが、フレームワークを使用することで開発効率があげられるため。
導入手順
1.ターミナルを起動し、以下コマンドでReactアプリを作成
npx create-react-app react-tailwind-css
２．作成したReactアプリのホームディレクトリへ遷移
cd react-tailwind-css
3.Tailwind CSSを使用するために必要なライブラリをインストールする
npm install -D tailwindcss postcss autoprefixer
4.tailwind.config.js と tailwind.config.jsを作成する
npx tailwindcss init -p
5.tailwind.config.jsファイルの「content」部分にTailwind CSSを反映させたいファイルを指定する
/** @type {import('tailwindcss').Config} */
module.exports = {
content:[
"./src/***.jsx",
"./src/***.jsx",
],
theme: {
extend: {},
},
plugins: [],
}
6../src/index.cssに以下の各レイヤーのディレクティブを追加
@tailwind base;
@tailwind components;
@tailwind utilities;
７．以下コマンドでReactアプリを起動
npm run start
８．Reactアプリで Tailwind CSSを使用する
export default function App() {
return (
<h1 className="mt-10 text-5xl underline underline-offset-4">
Hello world!
</h1>
)
}
参考資料
Discussion