PostCSS does not process tailwind

Question

This is using Laravel with Vite. I have gone through guides on how to do this from multiple sources, and while there seems to be several different approaches that should work, nothing seems to result in tailwind directives being processed by postcss.

In package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.7",
        "axios": "^0.27",
        "laravel-vite-plugin": "^0.4.0",
        "lodash": "^4.17.21",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.6",
        "vite": "^3.0.0"
    },
    "dependencies": {
        "amqplib": "^0.10.0"
    }
}

In vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

In postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

In tailwind.config.js

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

In resources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

and finally in app.blade.php

<!DOCTYPE html>
<html land="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewpoint" content="width=device-width, initial-scale=1.0" />
        <title> ISAD </title>
        @vite('resources/css/app.css')

</head>
<body>
    <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Which renders as

<!DOCTYPE html>
<html land="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewpoint" content="width=device-width, initial-scale=1.0" />
        <title> ISAD </title>
        <script type="module" src="http://127.0.0.1:5173/@vite/client"></script><link rel="stylesheet" href="http://127.0.0.1:5173/resources/css/app.css" />
</head>
<body>
    <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

With app.css still containing just

@tailwind base;
@tailwind components;
@tailwind utilities;

There is probably something very small that I am overlooking.

Nate · Accepted Answer · 2022-07-16 23:20:14Z

1

This is more than likely because your vite server is being blocked by an adblocker...

Verify by opening the network tab, does the vite server and assets return an err_blocked_by_client?

You more than likely have to whitelist your vite server with your adblocker... You can read more on this issue here: https://github.com/laravel/vite-plugin/issues/47

answered Jul 16, 2022 at 23:20

Nate

415 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Denny Kurniawan Over a year ago

I am using Brave browser and this is solve my problem.

vla-dis · Accepted Answer · 2022-10-15 01:30:06Z

-1

Just try to re-run Vite if it's running

Ctrl+C to terminate
npm run dev or yarn dev

answered Oct 15, 2022 at 1:30

vla-dis

11 bronze badge

Collectives™ on Stack Overflow

PostCSS does not process tailwind

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related