【Nuxt3】Tailwind CSSを使用する

はじめに

こんにちは、プログラミングを始めて約3年のエンジニアのkeitaMaxです。

前回の記事

前回作成したものを修正して、Tailwind CSSを使えるようにしたいと思います。

公式を見ながらやっていきます。

Tailwind CSSをインストール

以下のコマンドでTailwind CSSのインストールとtailwind.config.jsファイルの作成をします。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Tailwind CSSを使用できるようにする

tailwind.config.jsを以下のようにします。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

次に、assets/css/フォルダを作成し、その中にmain.cssファイルを作成します。

main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

nuxt.config.jsファイルを以下のように修正します。

nuxt.config.js

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ["~/assets/css/main.css"],     //追加
  postcss: {     //追加
    plugins: {     //追加
      tailwindcss: {},     //追加
      autoprefixer: {},     //追加
    },     //追加
  },     //追加
  components: ["@/components"],
});

これで以下コマンドでビルドすればTailwind CSSが適応できています。

npm run dev

試しに、以前作成したカウントアップの画面の背景を赤くしてみます。

index.vue

  <div class="bg-red-600">
    カウンター: {{ counter }}
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </div>

こんな感じにTailwind CSSのクラスを付けると、

このように背景が赤くなりました。

VSCodeでファイル保存したときに自動整形できるようにする

次に、Tailwind CSSのクラスを、VSCodeでファイル保存したときに自動整形できるようにしたいと思います。

以下のコマンドで必要なライブラリをインストールします。

npm install @nuxtjs/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-prettier eslint eslint-plugin-tailwindcss eslint-plugin-vue prettier prettier-plugin-tailwindcss

(色々インストールしてしまいました。これいらないよというのがわかる方いたら教えていただけると助かります。)

そして、.eslintrc.cjsと.prettierrcを作成し、以下のようにします。

.eslintrc.cjs

module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:tailwindcss/recommended',
    '@nuxtjs/eslint-config-typescript',
    '@vue/eslint-config-prettier',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint', 'tailwindcss'],
  rules: {
    'tailwindcss/no-custom-classname': [
      'warn',
      {
        config: 'tailwind.config.cjs',
      },
    ],
    'vue/multi-word-component-names': 'off',
  },
};

.prettierrc

{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "quoteProps": "consistent",
  "trailingComma": "es5",
  "vueIndentScriptAndStyle": true
}

ちなみに'vue/multi-word-component-names': 'off',は、以下のようなエラーがでて嫌だったので追加しました。

Component name "index" should always be multi-word

これでVSCodeを再起動すると、自動整形ができるようになります。

Tailwind CSS公式にある下記をvueファイルにコピペして試してみましょう。

<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>

(https://tailwindcss.com/docs/editor-setup)

これをコピペし、保存すると以下のようになりました。

<button
  class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3"
>
  ...
</button>

しっかりと自動で成形されているのがわかります。

おわりに

Nuxt.jsの自動整形のところでなかなかうまくいかずに詰まってしまいましたが、なんとかできてよかったです。

この記事で質問や、間違っているや、もっといい方法がある、無駄なものをインストールしているよといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました。

参考

次の記事