({ 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":
{},
},
});
},@layer utilities {
.my-custom-class {
background-color: #f5f5f5;
border-radius: 4px;
padding: 8px;
}
}
In this example, we're using the @layer directive to add a new utility class to
the utilities layer. The my-custom-class class has a gray background, rounded
corners, and a bit of padding.
Once you've defined your custom class, you can use it in your HTML like any other
Tailwind CSS utility class:
<div class="my-custom-class">This div has a custom class!</div>/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
screens: {
sm: '480px',
md: '768px',
lg: '976px',
xl: '1440px',
},
colors: {
'blue': '#1fb6ff',
'pink': '#ff49db',
'orange': '#ff7849',
'green': '#13ce66',
'gray-dark': '#273444',
'gray': '#8492a6',
'gray-light': '#d3dce6',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'128': '32rem',
'144': '36rem',
},
borderRadius: {
'4xl': '2rem',
}
}
}
}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