【Nuxt3 + TailwindCSS】@nuxtjs/tailwindcssの導入

Nuxt3プロジェクトの作成

プロジェクト作成

npx nuxi init プロジェクト名

VScodeで開く

code プロジェクト名

https://qiita.com/naru0504/items/c2ed8869ffbf7682cf5c

yarn or npmのインストール

yarn install
or
npm install

実行

yarn dev -o
or
npm run dev -- -o

公式のインストール方法が乗ったページ

https://v3.nuxtjs.org/getting-started/installation

@nuxtjs/tailwindcss のインストール

yarn or npmでインストール

yarn add @nuxtjs/tailwindcss -d
or
npm install @nuxtjs/tailwindcss -D

tailwindを初期化

npx tailwindcss init

nuxt.config.ts を編集

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    modules: ['@nuxtjs/tailwindcss'],
})

公式のインストール方法が乗ったページ

https://tailwindcss.nuxtjs.org/setup

オプション: prettier + prettier-plugin-tailwindcss を追加

yarn or npmでインストール

yarn add prettier prettier-plugin-tailwindcss -d
or
npm install prettier prettier-plugin-tailwindcss -D

公式のインストール方法が乗ったページ

https://github.com/tailwindlabs/prettier-plugin-tailwindcss