xxxxxxxxxx
To have tailwindCSS classes to work from JS file-
You need to **define the path of js file** in the content portion of **tailwind.config.js** file.
Example: <br>
content: ["./*.{html,js}", "./src/**/*.{html,js}"]
Using this, your tailwind compiler will know that you are trying to add a css class from your JS file and that class will appear in the output css file.
Content Configuration is mentioned and explained in details - [**Here [Official Documentation]**][1]
[1]: https://tailwindcss.com/docs/content-configuration#pattern-recommendations
xxxxxxxxxx
({ addUtilities }: any) => {
addUtilities({
".container-custom": {
"@apply mx-auto w-[90%] max-w-[1800px] md:w-[96%] lg:w-[90%]": {},
},
".container-custom2": {
"@apply max-w-[1800px] mx-auto": {},
},
".container-custom3": {
"@apply max-w-[1000px] mx-auto": {},
},
".mt-section": {
"@apply mt-16 md:mt-24": {},
},
".py-section": {
"@apply py-16 md:py-24": {},
},
".mb-section": {
"@apply mb-10 md:mb-16": {},
},
".mt-element": {
"@apply mt-3 md:mt-4": {},
},
".only-mobile": {
"@apply lg:hidden": {},
},
".non-mobile": {
"@apply hidden lg:flex": {},
},
".flex-gap": {
"@apply gap-y-14 gap-x-12": {},
},
".flex-center": {
"@apply flex justify-center items-center": {},
},
".paragraph": {
"@apply text-base font-[400] text-[#BABABA]": {},
},
".h1": {
"@apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl":
{},
},
});
},