nuxt3にtailwindcssとvuetifyを入れるとtaliwindcssが反映されない

2023年11月17日2023年11月30日

vuetifyとTailwindcssを組み合わせてデザインしたい。

細かく言うとvuetifyで大まかに作って、tailwindでデザインの細かい部分を調整したかった。

事象としてはどちらのCSSも反映自体はされるようですが、htmlタグやTailwindcssのクラスによっては反映できないようです。

tailwindcssとvuetifyを入れるとtaliwindcssが反映されない

nuxt3,vueファイルのtemplate内です。

<template>
    <v-app>
    <div class="border-b-8 border-orange-400 mb-8 ">
        <form v-on:submit.prevent>
            <label >検索地</label>
            <br>
            <input 
            type="text" 
            label="検索地" 
            v-model="searchPoint"
            placeholder="例）横浜" 
            v-bind:rules="[required]"
            class="border-x-2 border-y-2 border-gray-500 rounded-md hover:bg-gray-100"    
                        >

           
            <div>

            </div>
                    
            <br>
            <label >検索条件</label>
            <br>
            <input 
            type="text" 
            label="検索条件" 
            v-model="searchCondition"
            placeholder="例）サウナ　今治" 
            class="border-x-2 border-y-2 border-gray-500 rounded-md hover:bg-gray-100"    
            >
            <br>
            
            <div>
                <button v-on:click="getData">検索</button>
            </div>
            

            <v-btn v-on:click="getData" 
            color="red"
            class="my-1">VUETIFY</v-btn >
            <div>
            <button 
            class="text-white rounded-md w-24 py-2 bg-blue-600 hover:bg-white transition-all duration-1000">tailwind</button>
            </div>
            <div class="py-2 px-8 border-4 w-40 m-auto">
                tailwindの<br>ボーダー
            </div>

            <p>検索地:{{ searchPoint_w }}</p>
            <p>検索条件:{{ searchCondition_w }}</p>
            
            


        </form>

    </div>
    
    </v-app>
</template>

nuxt.config.tsからVUETIFYのCSSを外した状態

コンポーネントは入っているのですが、スタイルが適応されていない状態です。

当たり前ですが、buttonが白黒です。

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: [
      "~/assets/css/tailwind.css",
      //"@/assets/main.scss"     
],


  postcss: {
   plugins: {
     tailwindcss: {}
   
   },
  },

  build: {
    transpile: ["vuetify"]
  },



  
  vite: {
    ssr: {
      noExternal: ['vuetify'],
    },


    define: {
        "process.env.DEBUG": false
    },
    
    //for HMR
    server: {
        watch: {
            usePolling: true
        }
    },
  }

 

})