Tailwind CSSはユーティリティー(汎用的なスタイル)に特化したCSSフレームワークである。Tailwind CSSで必要最低限のスタイル+自分のスタイルを追加する方法で使いたいと思い、Nuxt.jsプロジェクトで採用することにした。
インストール
Tailwind CSS v3.0以降
postcss8、autoprefixerも必要なので、一緒にインストールする。
// npm
npm install -D tailwindcss postcss@latest autoprefixer@latest @nuxt/postcss8
tailwind.config.jsを作成する。
// npm
npx tailwindcss init
Tailwind CSS v2.0
// npm
npm install --save-dev @nuxtjs/tailwindcss
nuxt.config.jsに追加
Tailwind CSS v3.0以降
nuxt.config.js
export default {
buildModules: [
'@nuxt/postcss8',
...
],
build: {
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
}
}
./assets/css/main.css
を作成し、以下を記述する。
main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
nuxt.config.jsに記述する。
nuxt.config.js
css: [
'~/assets/css/main.css',
],
Tailwind CSS v2.0
nuxt.config.js
export default {
buildModules: ['@nuxtjs/tailwindcss'],
...
}
tailwind.config.jsを作成する。
// npm
npx tailwindcss init
npm run dev
でサイトを起動すると、以下のファイルが生成される。
/assets/css/taiwlind.css
nuxt.config.jsに記述する。
nuxt.config.js
css: [
'~/assets/css/tailwind.css',
],
tailwind.config.jsの設定
content
(v2.0の場合はpurge/content
)でNuxt.jsのテンプレートパスを定義する。
tailwind.config.js
module.exports = {
content: [
'content/**/*.md',
'components/**/*.vue',
'layouts/**/*.vue',
'pages/**/*.vue',
'plugins/**/*.js',
'nuxt.config.js'
],
theme: {
container: {
center: true,
},
fontFamily: {
'sans': '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif',
},
},
important: true,
}
nuxt/contentで記事を作成しているので、'content/**/*.md'
を追加している。
以下の設定は、各人の好みや目的で左右されると思う。
container
…center: true
でcontainer
classの要素を中央寄せにする(margin: 0 auto;
のスタイルが付く)。fontFamily
…デフォルトのフォントスタイルを変えたい時に追加。important
…各classのスタイルに!important
を追加したい場合、値をtrue
にする。tailwind CSSのユーティリティスタイルを優先したいのでこの設定を追加した。何も記述しなければデフォルトのfalse
が適用される。