Nuxt3にtailwindを導入する

Nuxt3にtailwindを導入する

導入手順

インストール

npm install -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest

@nuxtjs/tailwindcss → Nuxt3でTailwindCSSを利用するためのモジュール tailwindcss@latest → Tailwindの最新版 postcss@latest → postcss(CSSツールを作るためのフレームワーク)の最新版 autoprefixer@latest → autoprefixerの最新版

nuxt のビルド設定

ファイル名：nuxt.config.ts

export default defineNuxtConfig({
  buildModules: ['@nuxtjs/tailwindcss'],
  css: ["@/assets/css/tailwind.css"],
})

buildModules: ['@nuxtjs/tailwindcss'] → @nuxtjs/tailwindcssモジュールをビルド時に利用する css: ["@/assets/css/tailwind.css"] → @/assets/css/tailwind.cssのCSS設定の読み込み

Tailwind のセットアップ

npx tailwindcss initでtailwind.config.jsを作成する

ファイル名：tailwind.config.js

module.exports = {
  // tailwindを適用したいファイル群を指定
  content: [
    "./app.vue",
    './components/**/*.{vue,js}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

./assets/css/tailwind.cssを作成

ファイル名：./assets/css/tailwind.css

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

上記の３つは【Tailwind CSS】標準で読み込まれるCSSについて 【Tailwind CSS】標準で読み込まれるCSSについて | プログラミングマガジン

参考

Nuxt 3 + Tailwind CSS 3 Starter: How to add Tailwind CSS v3 to your Nuxt 3 application - YouTube

Nuxt3 に Tailwind CSS をインストールしてみた