Compile tailwind css in vue component

I want tailwind css to compile in my vue components but somehow I can't get that to work. What I tried so far

Added the components to the vite config options

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/components/**.vue', // here 
            ],
            refresh: true,
        }),
    ],
});

Any ideas?

Best

Sinnbeck

3 years ago

Level 102

I assume it's a spa? https://laravel.com/docs/9.x/vite#configuring-vite

If you are building an SPA, including applications built using Inertia, Vite works best without CSS entry points:

In your app.js

import './bootstrap';
import '../css/app.css';

And how the vite config should look https://laravel.com/docs/9.x/vite#vue

1 like

lara28580

3 years ago

Level 10

@Sinnbeck No it is not a spa.

app.js

import { createApp } from 'vue/dist/vue.esm-bundler'
import VueInstantSearch from 'vue-instantsearch/vue3/es';
import MySearch from './components/MySearch.vue'

const app = createApp(VueInstantSearch)

app.component('my-search', MySearch)

app.mount('#app')

app.css

@import '/node_modules/instantsearch.css/themes/algolia-min.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

Sinnbeck

3 years ago

Level 102

@SmokeTM then just load the css file in @vite() in your layout

@vite(['resources/css/app.css', 'resources/js/app.js',])

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                
            ],
            refresh: true,
        }),
    ],
});

1 like

lara28580

3 years ago

Level 10

@Sinnbeck Did that already but the css classes are not compiled in my vue components.

Sinnbeck

3 years ago

Best Answer

Level 102

@SmokeTM did you tell tailwind to look in those? In the content array in the tailwind config

1 like

lara28580

3 years ago

Level 10

@Sinnbeck Thank you so much!

Please or to participate in this conversation.