Nuxt.jsでtailwindcssを使う

この記事は最終更新日から 1 年以上が経過しており、内容が古くなっている可能性があります。

ユーティリティー（汎用的なスタイル）に特化した 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が適用される。

参考ページ

Suzunatsu

このブログについて

コーディングやWeb関連技術の記事と、買い物など日々のメモから成り立っています。 →少しだけ詳しく

この記事がお役に立ちましたら、サポートをお願いします。

記事トップに戻る

広告