最近TailwindCSSというCSSフレームワークがあることを知り、
良い開発体験ができるということなので使用してみました。
TailWindCSSとは
UtilityFirstというアプローチでスタイルを組むことができるCSSフレームワーク。
UtiltyFirstとは？
TailwindCSSがたくさんClassを用意してくれているため、classに命名を考えなくてもよい。(TailWindCSSで用意されたクラスをベースにデザインを整える）
レスポンシブやダークモードにも簡単に対応できる
JITモードを有効にすることによる、開発時のブラウザパフォーマンス向上、ビルドタイムの高速化
Class名を考えるのが苦手な自分にとって命名しなくても書けるのは
とても嬉しいです（笑）
導入
それでは本題に入り、Next.jsに導入していきましょう。
新しくプロジェクトを作成する場合、以下のコマンドでTailWindCSSが搭載されたプロジェクトが作成できます。
npx create-next-app -e with-tailwindcss my-project
cd my-project
プロジェクト構造は以下の通りです。
├── pages
├── public
├── node_modules
├── .gitignore
├── README.md
├── postcss.config.js
├── package.json
├── tailwind.config.js
└── yarn.lock
page/index.jsを確認してみましょう。
<main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center">
<h1 className="text-6xl font-bold">
Welcome to{' '}
<a className="text-blue-600" href="https://nextjs.org">
Next.js!
</a>
</h1>
ちゃんとTailWindCSSが導入されています！！
それではブラウザで確認してみましょう。
# npm
npm run dev
# yarn
yarn dev
以下のようなページが表示されていれば導入成功です！！
Next.js(TypeScript）でTailWindCSSを導入する
TypeScriptでも導入してみようとしたところ、公式のサンプルはJavaScirptのみということだったため、一からTailwindCSSを導入していきます。
まずはお決まりのプロジェクト作成
npx create-next-app myProject -typescript
プロジェクトが作成できたら、プロジェクト内にTailwindとPostcssとautoprefixerをインストールしてください。
# npm
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
# yarn
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
インストールができたらTailWindCSSを設定するための設定ファイルを作成します。
#npm
npx tailwindcss init -p
#yarn
yarn tailwindcss init -p
Tailwind.config.jsとposscss.config.jsが作成されます。
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Tailwind CSS では、tailwind.config.js 内にある purge オプションを設定することで、ビルド生成時の未使用のスタイルを除外し、パフォーマンスの最適化を行うことができるので設定していきます。
公式は./pagesや./componentsを対象としていますが、今回はsrcディレクトリ内を対象とします
purgeしたファイルが正しくない設定されていないと本番環境でCSSが反映されません。
tailwind.config.js
module.exports = {
//追記
purge: ["./src/**/*.{js,ts,jsx,tsx}"],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
JET modeを適用させる
概要にも書いたJet modeを適用させます。
// tailwind.config.js
module.exports = {
// 追記
mode: 'jit',
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
CSSにTailwindを適用させる
ここまで終了したら、tailwindを適用させましょう。
CSSにtailwindCSSを適用させるためには2つの方法があるみたいです。
TailwindCSSを直接ts(js）にimportする
CSS内にTailwindを含める
TailwindCSSを直接ts(js）にimportする
```
// pages/_app.ts(js)
import '../styles/globals.css'
import 'tailwindcss/tailwind.css'
function MyApp({ Component, pageProps }) {
return
}
export default MyApp
```
こちらの方法は、module.cssなどで生のCSSの利用をしない場合に有効みたいです。
CSS内にTailwindを含める
./styles/globals.cssを開き、以下のように書き換えます。
/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
これにより、ビルド時に構成されたシステムに基づき、すべてのスタイルをTailwindに変更するみたいです。
最後にpages/_app.ts(js)にCSSファイルをインポートして下さい。
// pages/_app.js
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
後はブラウザで確認し、TailwindCSSが適用されていることを確認するだけです！！
↧