Tailwind styles not loading

Hey guys, so as im following the Laravel, Vue and SPA's course I've found out that im not loading Tailwind correctly yet the build was done succesfully, in fact in the sass/app.css directory (resources/sass/app.css) underlines these 3 variables in yellow:

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

Warning is this: Unknown at rule @tailwindscss(unknownAtRules)

Since Iv'e never used Sass before, I sincerely don't know if I need to compile it first yet we use the app.scss, and this was not explained in the course, do I need to compile it first? Why would it not be loading if the build was 'succesful' ? It could be that the css is not loaded properly so here goes that:

web/routes.php:

Route::get('/{any?}', function () {
    return view('app');
});

CSS link (app.blade.php):

<link rel="stylesheet" href="/css/app.css">

chaudigv

5 years ago

Level 16

In your webpack.mix.js, add tailwindcss as a PostCSS plugin:

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

Include Tailwind in your CSS

/* ./resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

app.blade.php

   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link href="{{ asset('css/app.css') }}" rel="stylesheet">

You're finished! Now when you run npm run watch, npm run dev or npm run prod, Tailwind CSS will be ready to use in your Laravel Mix project.

Check docs Configure Tailwind with Laravel Mix

1 like

warpig

5 years ago

Level 12

So, from this:

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css')
    .tailwind();

To this: (?)

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

Sorry, I forgot to add these important lines as well !

warpig

5 years ago

Level 12

Unless the classes were given different names throughout the course of time, I still don't know why there would be a warning on them.. for example consider this: https://imgur.com/5TUg5kM

signalwarrant

4 years ago

Level 3

@warpig, did you ever get this sorted out? I'm having the same problem. Everything renders correctly locally, some of the CSS is not rendered when I deploy the app to prod via Digital Ocean app.

webpack.mix.js file

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

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

tailwind.config.js

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

app.css

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

I run npm run production before pushing to Github to kick off the build, no errors seen in the console. I'm a beginner with tailwind, I'm sure I'm missing something easy but I can find it after some significant Googling and reading through this forum.

Any assitance would be greatly appreciated.

Babe_Chinwendum

3 years ago

Level 1

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',
],

Please or to participate in this conversation.