Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I installed tailwindCSS on my Laravel 9.5 project, everything is working fine except my Laravel components not applied to styles. I tried to add component directory in my tailwind.config.js, but still not working.
"./resources/**/*.blade.php",
"./resources/**/components/*.blade.php", // I added this line to fix it!
"./resources/**/*.js",
"./resources/**/*.vue",
anyone know the problem and how to fix it?
This should work.
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}
I have no problem for styling blade components.
@vincent15000 My tailwindCSS config file is like that, but files in the views/components folder remain unstyled?
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
};
@Abdifatah Did you restart the watcher?
@Abdifatah I don't have this problem in my projects.
@vincent15000 @snapey I figured out the problem; it's not components. It is when I try to use dynamic Tailwindgradient classes like this;
from-{{ $gradient1 }}-500 via-{{ $gradient2 }}-400 to-{{ $gradient2 }}-400 p-2 transition hover:scale-105"
@Abdifatah tailwind purges unused styles. To keep then anyways, you need to write a safe list (regex for instance)
https://tailwindcss.com/docs/content-configuration#safelisting-classes
@Abdifatah Yes, thats a totally different problem. Check the docs for safelisting classes.
https://tailwindcss.com/docs/content-configuration#safelisting-classes
@Sinnbeck Thank you that's what I'm looking for.
@Snapey Thank you so much.
Please or to participate in this conversation.