arkid's avatar

Tailwind 4 and Laravel not processing my CSS file

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 ?

0 likes
3 replies
arkid's avatar

By chance I worked this out. It's due to a bug in vite and the scenario I was running it in. Which is on Windows calling vite from my main drive that is looking at files on a different drive via symbolic linked folders. The issue it seems has been known about for a while: https://github.com/vitejs/vite/issues/20420

Snapey's avatar

personally, I stick with the tailwind cli and don't use Vite.

You could do this for just your tw4 compile?

Please or to participate in this conversation.