CODEWITHSUNDEEP
laravel
Matt Pierce
Matt Pierce

Reputation: 805

Laravel Mix Not Compiling Tailwind CSS

I just created a new project with Laravel and Sail. I am noticing that some Tailwind css classes are not loading when I run "sail npm run dev". For example, an element that had the utility "py-5" was not loading. So, I decided to try compiling with Laravel Mix again and it finally worked. Same happened when working with Tailwind css column classes. When I run Mix it always shows it compiled successfully.

Any ideas?

Upvotes: 3

Views: 3066

Answers (2)

John Zwarthoed
John Zwarthoed

Reputation: 1277

Tailwind has a config option (tailwind.config.js) in what files it will look for the classes used, make sure all the files you use the tailwind class in are part of the content option.

module.exports = {
  ...
  content: [
    './storage/framework/views/*.php',
    './resources/**/*.blade.php',
    './resources/**/*.js',
  ],
  ...
}

Upvotes: 0

Maik Lowrey
Maik Lowrey

Reputation: 17556

The problem probably results because you want to build tailwindcss once in the container but it is not configured / installed there. Locally it seems to work for you already. Therefore, you should go through the following steps.

Make sure that you are already install tailwind and other dependency via: sail npm install.

Check always if you have postcss anbd autoprefixer installed via sail: sail npm install -D tailwindcss@latest postcss@latest autoprefixer@latest.

Then check your webpack.mix.js file. It have to look like:

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

Add to your css file this three lines:

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

Then run sail npm run dev.

Upvotes: 1

Related Questions