この記事は最終更新日から 2 年以上が経過しており、内容が古くなっている可能性があります。
ユーティリティー（汎用的なスタイル）に特化した 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 以降
export default {
buildModules: [
'@nuxt/postcss8',
...
],
build: {
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
}
}
./assets/css/main.cssを作成し、以下を記述する。
@tailwind base;
@tailwind components;
@tailwind utilities;
nuxt.config.js に記述する。
css: [
'~/assets/css/main.css',
],
Tailwind CSS v2.0
export default {
buildModules: ['@nuxtjs/tailwindcss'],
...
}
tailwind.config.js を作成する。
// npm
npx tailwindcss init
npm run devでサイトを起動すると、以下のファイルが生成される。
/assets/css/taiwlind.css
nuxt.config.js に記述する。
css: [
'~/assets/css/tailwind.css',
],
tailwind.config.js の設定
content（v2.0 の場合はpurge/content）で Nuxt.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でcontainerclass の要素を中央寄せにする（margin: 0 auto;のスタイルが付く）。fontFamily…デフォルトのフォントスタイルを変えたい時に追加。important…各 class のスタイルに!importantを追加したい場合、値をtrueにする。tailwind CSS のユーティリティスタイルを優先したいのでこの設定を追加した。何も記述しなければデフォルトのfalseが適用される。
参考ページ
☕コーヒーをおごる
