codinglara's avatar

Laravel doesn't load Tailwind styles

Laravel doesn't load Tailwind styles on a fresh installation.

I installed Tailwind via NPM and created my config file tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

I added the following code to my resources/app.css

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

Also, my webpack.mix.js file looks like this

  mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
     require("tailwindcss"),
    ]);

I also included the stylesheet in my main layout

   <link href="{{ asset('css/app.css') }}" rel="stylesheet">

I didn't get any errors when running

npm install
npm run dev

Let's say I created a simple div like this

<div class ="bg-red-500">
...
</div>

The code will be loaded but the class won't be applied to my div.

0 likes
8 replies
apex1's avatar

Try right-clicking on the browser's refresh button and select empty cache and reload.

Snapey's avatar
Snapey
5 years ago
Best Answer
Level 122

use your browser network dev tools and make sure that your css is loaded

Look at the css file and make sure it contains the tailwind classes

1 like
miguellima's avatar

@codinglara Try this way:

On ./webpack.mix.js

const mix = require('laravel-mix')
const tailwindcss = require('tailwindcss');
const path = require('path')

mix.js('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')
  .options({
    processCssUrls: false,
    postCss: [
      tailwindcss('./tailwind.config.js')
    ]
  });
Brandon Eichhorn's avatar

I experienced the same issue, and this will fix it for you, open your app.css and replace the lines with:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Make sure to run npm run dev after and empty your cache.

7 likes
Anjup's avatar

@Brandon Eichhorn could you explain more about this. It worked for me too.Thank you

Babe_Chinwendum's avatar

I had the same issue, I missed the recommendation by mix on how to fix it here:

 warn - The content option in your Tailwind CSS configuration is missing or empty.

warn - Configure your content sources or your generated CSS will be missing styles.

From the docs (I wanted to add link to docs but could not) you have to add this to tailwind.config.js:

content: [
    './storage/framework/views/*.php',
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
],
3 likes
Argolian's avatar

Same issue here. Assuming you're using vite, I fixed it by adding this to the section

@vite('resources/css/app.css')

As well as addition to tailwind.config,js as mentioned above.

Please or to participate in this conversation.