2020-08-13
こんにちは、0371です。
GatsbyJS
に TailwindCSS
を導入しています。
忘れっぽいので、今のうちに導入方法を備忘録として残しておきます。
ついでにPurgeCSS
を使って、CSSのサイズを削減するのも行います。
GatsbyJS
を使用したサイトTailwindCSS
を理解しようとする気持ちまずは必要なプラグインをインストールします。
PostCSS
は、tailwindCSS
の元になっているフレームワークです。
yarn add gatsby-plugin-postcss tailwindcss gatsby-plugin-purgecss
そして、gatsby-config.js
に プラグインを書き込んでいきます。
gatsby-plugin-postcss
とgatsby-plugin-purgecss
を追加しましょう。
gatsby-plugin-purgecss
は、必ずCSS系のプラグインの後に記述してください。
module.exports = {
/* Your site config here */
plugins: [
`gatsby-plugin-postcss`,
{
resolve: `gatsby-plugin-purgecss`,
options: {
rejected:true, // 削除されたCSSの容量を表示
printRejected: false, // 削除したCSSを最大100個まで一覧表示
printAll: false // 削除したCSSを全て一覧表示
develop: false, // 開発環境でbuildした時もCSSを削除
tailwind: true, // TailwindCSS使用時はTrue default: false
whitelist: ['selector'], // 削除しないCSSを指定 default: []
ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // 削除しないファイルを指定 default: []
// purgeOnly : ['components/', '/main.css', 'bootstrap/'], // 指定したファイルのCSSのみを削除 default: []
}
},
],
}
使わないoption
は削除してください。
最低限、tailwind: true
だけは設定しましょう。
gatsby-plugin-purgecss
のoption
は他にもあります。
気になる方は、公式ドキュメントのリンクから確認してみてください。
※PurgeCSS
により、意図しないCSSの削除が発生する可能性があります。
レイアウトが崩れたら、whitelist
かignore
オプションで対応しましょう。
次に、tailwind.config.js
を作成するためにコマンドを入力します。
npx tailwindcss init
プロジェクトのrootディレクトリにあるので、中身を確認して、purge: false
を記述してください。
tailwindCSS
にデフォルトでついてる削除機能をオフにします。
module.exports = {
purge: false, // ここ
theme: {
extend: {},
},
variants: {},
plugins: []
}
その後、プロジェクトのrootディレクトリに、postcss.config.js
を作成します。
const tailwind = require('tailwindcss')
module.exports = () => ({
plugins: [tailwind('./tailwind.config.js')],
})
これで、postcss.config.js
が tailwind.config.js
を認識するようになりました。
次に、Tailwindcss を使用するための CSS ファイルを作成します。
./src/utils/tailwind.css
などとします。
@tailwind base;
@tailwind components;
@tailwind utilities;
うまく導入できたかどうかをテストしてみます。
./src/pages/test.js
を作って、以下のコードを貼り付けてください。
import React from "react"
import '../utils/tailwind.css'
const Test = () => {
return (
<div>
<h1 className="h-screen flex items-center justify-center text-4xl transform hover:scale-150 hover:rotate-45 hover:skew-y-12 hover:-skew-y-12 transition duration-300 ease-in-out">
Hello tailwindCSS
</h1>
</div>
)
}
export default Test
gatsby develop
でhttp://localhost:8000/test
にアクセスしてください。
画面内にカーソルを置いたときに、文字のアニメーションが動作したら成功です。
画面外で元に戻ります。
最後に、tailwind.css
を layout.js
等にインポートしましょう。
import '../utils/tailwind.css'
これで、プロジェクトの中で、TailwindCSS
を使用できるようになりました。
test.js
は不要であれば削除してください。
Tailwind CSS
"https://tailwindcss.com/"
Gatsby Plugin Purgecss
"https://www.gatsbyjs.com/plugins/gatsby-plugin-purgecss/"
Tailwind CSS Cheat Sheet
"https://nerdcave.com/tailwind-cheat-sheet"
TailwindCSS
は神。