Liquidsのロゴ Liquids

0

Nuxtへのtailwind.cssのインストール方法

Nuxt.js

各パッケージをインストールします。
npm

npm install -D tailwindcss postcss autoprefixer

yarn

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init

tailwind.config.jsに下記の内容を記述する。

tailwind.config.js
/** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./components/**/*.{js,vue,ts}", "./layouts/**/*.vue", "./pages/**/*.vue", "./plugins/**/*.{js,ts}", "./nuxt.config.{js,ts}", "./app.vue", ], theme: { extend: {}, }, plugins: [], }

プロジェクトのルートにassets/css/main.cssを作成し、以下の通り記述します。

assets/css/main.css
@tailwind base; @tailwind components; @tailwind utilities;

nuxt.config.tsに以下の内容を追記する。

nuxt.config.ts
export default defineNuxtConfig({ postcss: { plugins: { tailwindcss: {}, autoprefixer: {}, }, }, css: [ '~/assets/css/main.css' ] })

ここまでで必要な手順は終了したので、使えるか試してみましょう。正しくインストールされていればtailwindが使用できるはずです。

<template>
  <div>
    <h1 class="text-yellow-500 text-5xl">hello world</h1>
  </div>
</template>
Liquidsのロゴ Liquids

Liquidsは誰でも投稿・編集ができる技術Wikiコミュニティ📝です。

あなたもLiquidsで技術Wikiを
書いてみませんか?