🫅

Nuxtjsにtailwindを導入する

2023/02/28に公開

1. install

npm install --save-dev @nuxtjs/tailwindcss

2. config

projectのルートでnuxt.config.jsを作成、下記コードを追記。
記載後nuxt devを実行

nuxt3系の場合

export default defineNuxtConfig({
    modules: ['@nuxtjs/tailwindcss']
})

nuxt2系の場合

export default {
  modules: ['@nuxtjs/tailwindcss']
}

3.tailwind

これだけで基本的な設定は完了。好きなファイルでtailwindを使用できる。

<template>
  <div class="text-3xl font-bold underline">
    Hello World
  </div>
</template>

参考

Discussion