I always use the official one.
https://tailwindcss.com/docs/installation/framework-guides/laravel/vite
I started my first project with Tailwind some days ago and have now wasted soooo many hours trying to get vite to process my main CSS file but it just doesn't work.
I know that there is a lot of conflicting info online about configuring TailWind v4 and I'm just lost in the swamp of tips, both on laracasts, other forums, official Tailwind docs and AI responses.
To confirm, something that is important to me is to split my css up into separate files. So I have
app.css pages.css general.css
It's the general.css that I want to add the tailwind to.
I have vite configured as so
// vite.config.js
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
import laravel from 'laravel-vite-plugin'
export default defineConfig({
plugins: [
tailwindcss(),
laravel({
input: [
'resources/css/general.css',
'resources/css/app.css',
'resources/css/pages.css',
'resources/js/app.js',
],
refresh: true
})
],
})
And then on my login page (outside of the app) I add 2 of my css and JS in the template with
@vite(['resources/css/general.css', 'resources/css/pages.css', 'resources/js/app.js'])
At the top of my general.css I have
@import "tailwindcss";
I've tired various @source commands but they didn't help. I haven't activelyt installed anything to do with postcss either as I understand that this can confuse vite?
What I constantly see is that the general.css doesn't get pre-processed by vite. I always see the @import "tailwindcss" still in my output css.
I'm running npm run dev with the --debug flag so I see various stuff that probably gives some useful info, although I'm not sure what that is. It shows
vite:resolve 2.02ms /resources/css/general.css?direct -> F:/wwwroot/testapp/resources/css/general.css?direct +0ms
vite:resolve 0.51ms /@vite/client -> f:/wwwroot/testapp/node_modules/vite/dist/client/client.mjs +9ms
vite:resolve 0.50ms /resources/css/pages.css?direct -> F:/wwwroot/testapp/resources/css/pages.css?direct +1ms
vite:resolve 0.43ms /resources/js/app.js -> F:/wwwroot/testapp/resources/js/app.js +2ms
vite:resolve 1.54ms /resources/css/tailwindcss -> null +25ms
vite:html-fallback Rewriting GET /resources/css/tailwindcss to /index.html +0ms
vite:time 4.19ms /index.html +0ms
vite:time 4.85ms /index.html +1ms
vite:time 50.44ms /resources/css/general.css +6ms
vite:time 37.60ms /resources/css/pages.css +1ms
vite:time 35.83ms /resources/js/app.js +1ms
vite:load 49.32ms [fs] /@vite/client +0ms
vite:resolve 0.22ms @vite/env -> f:/wwwroot/testapp/node_modules/vite/dist/client/env.mjs +40ms
vite:import-analysis 5.71ms [1 imports rewritten] f:/wwwroot/testapp/node_modules/vite/dist/client/client.mjs +0ms
vite:transform 19.70ms /@vite/client +0ms
vite:time 81.53ms /@vite/client +41ms
vite:load 43.96ms [fs] ../../../../f:/wwwroot/testapp/node_modules/vite/dist/client/env.mjs +65ms
vite:import-analysis 0.04ms [no imports] f:/wwwroot/testapp/node_modules/vite/dist/client/env.mjs +45ms
vite:transform 0.52ms ../../../../f:/wwwroot/testapp/node_modules/vite/dist/client/env.mjs +44ms
vite:time 7.70ms ../../../../f:/wwwroot/testapp/node_modules/vite/dist/client/env.mjs +36ms
Are these ?direct url params added to my css a clue that shows vite isn't going to process the css ?
Anything else shows here as to what could be causing my lack of pre-processing ?
Please or to participate in this conversation.