Nuxt.jsでtailwindcssを使う

2020年05月26日
2022年05月07日

Ad Area

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でcontainerclassの要素を中央寄せにする（margin: 0 auto;のスタイルが付く）。
fontFamily…デフォルトのフォントスタイルを変えたい時に追加。
important…各classのスタイルに!importantを追加したい場合、値をtrueにする。tailwind CSSのユーティリティスタイルを優先したいのでこの設定を追加した。何も記述しなければデフォルトのfalseが適用される。