tailwind.config.js is not used with tailwindcss-windows-x64.exe

[WLiedl]

Hello,

i try to define my own color with this content in tailwind.config.js

module.exports = {
content: [
'./**/*.{html}',
],
theme: {
extend: {
colors: {
myblue: '#3AB0FF'
},
},
},
}

If a run the Compilation with this Command "tailwindcss-windows-x64.exe -i input.css -o output.css" the Color "myblue" is not in the output.css.

After countless attempts and tests, I have the feeling that tailwind.config.js is generally not used.

Hopefully this is a mistake and someone has a solution before I go crazy... 😒

With friendly cries for help

W. Liedl

[wongjn]

Assuming you're using v4, tailwind.config.js is not generally used. Rather, add the configuration to your input.css:

@import "tailwindcss";

@theme {
  --color-myblue: #3AB0FF;
}

See the documentation for details.

[WLiedl]

Hello wongjn,

Thanks for the answer, but unfortunately that doesn't work either... or I'm just cursed...

After compiling, there is no class named "myblue" in the output.css 😩

[wongjn]

There wouldn't be a class named myblue. It is a color value and would be a suffix so would only appear attached to class names like text-myblue or bg-myblue if you've used them anywhere.

[WLiedl]

Hello wongjn,

You're right, that's how it works!!! 🤩

If I don't have a tailwind.config.js file, how can I define the content the compiler should search?

module.exports = {
content: [
"./WPElement/**/*.{html,vb}",
]
};

Is something like this still possible?

Thank you in advance for your very valuable help. 🤗

[wongjn]

For many projects, you don't need to define the content the compiler should search. However, you can explicitly define sources if needed, check the documentation for details.

[WLiedl]

Thanks for the tip - I should be able to figure it out now. 😊