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?
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.
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',
],
...
}
sail npm install -D tailwindcss@latest postcss@latest autoprefixer@latest