💨

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

に公開
CSS
Nuxt
Tailwind CSS
Nuxt 3
tech

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

参考: Nuxt3公式

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

@nuxtjs/tailwindcss のインストール

インストール

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'],
})

参考: @nuxtjs/tailwindcss公式

https://tailwindcss.nuxtjs.org/setup

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

インストール方法

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

参考: prettier-plugin-tailwindcss公式

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

Discussion