🥝
Nuxt3でTailwind CSSを使えるようにする
概要
個人開発で使用するtailwind cssの初期設定を備忘録として書いていく。
インストール
tailwindの公式チュートリアル通りインストールする。
$ yarn add -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest
nuxtの設定
nuxt.config.ts
import { defineNuxtConfig } from "nuxt";
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
buildModules: ["@nuxtjs/tailwindcss"],
css: ["@/assets/css/tailwind.css"], // <= ドキュメントからさらに追加
});
tailwindの設定
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
// tailwindを適用したいファイル群を指定
content: [
"./app.vue", // <= ドキュメントからさらに追加
"./components/**/*.{vue,js}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
],
theme: {
extend: {},
},
plugins: [],
};
参考資料にはpostcssもインストールして設定したが、tailwind v3よりインストールしなくても良くなったのでこれでOK
参考資料
Discussion