Hello all my fellow frontend, backend and fullstack developers. Today i will be showing how we can create custom plugins in tailwind css to generate custom classes in 3 different methods.
Tailwind plugins
Tailwind CSS provide a plugin system that allows you to extend or customize its functionality. With Tailwind CSS plugins, we can add new utilities, components, or even extend the configuration.
We can define our custom plugin inside the plugin array of tailwind configuration.
We have few helper functions provided by tailwind that can be destructured in the custom plugin function
addUtilities(), for registering new static utility styles
addComponents(), for registering new static component styles
addBase(), for registering new base styles
addVariant(), for registering custom static variants
We will be covering 3 methods to add custom plugins
Method 1 - Defining custom plugin styles directly into tailwind config
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
plugins: [
plugin(function ({ addUtilities }) {
addUtilities({
".title--1": {
"fontFamily": "sans-serif",
"fontWeight": 600,
"fontSize": "108px",
"lineHeight": "104px",
"letterSpacing": "-2.16px"
},
});
}),
],
};
- This will create a utility for a “title--1” class with font related properties, which we could use as a single class instead of adding 5 different classes for each font related properties.
Method 2 - Defining custom plugin styles into a json file
If we have multiple level of classes let’s say, “title--1”, “title--2”, “title--3” and so on, we can create a json file containing all the classes object and pass it to the addUtilities() function as a param directly
// typography.json
{
".title--1": {
"fontFamily": "sans-serif",
"fontWeight": 600,
"fontSize": "108px",
"lineHeight": "104px",
"letterSpacing": "-2.16px"
},
".title--2": {
"fontFamily": "sans-serif",
"fontWeight": 600,
"fontSize": "92px",
"lineHeight": "96px",
"letterSpacing": "-1.38px"
}
.
.
.
}
const typography = require("./TailwindCustom/typography.json");
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
plugins: [
plugin(function ({ addUtilities }) {
addUtilities(typography);
}),
],
};
- We could add new classes or remove existing from this json and tailwind will generate the classes accordingly.
Method 3 - Defining an array of key values pair and handling the classes generation in tailwind config.
- With this method, we can just pass the key value pair to a category to generate a new class.
// colors.json - 3 arrays base, primary and secondary with key value pairs
{
"base": [
{
"white": "#FFFFFF"
},
{
"black": "#141414"
}
],
"primary": [
{
"100": "#2E2E80"
},
{
"200": "#141466"
},
{
"300": "#020233"
}
],
"secondary": [
{
"100": "#EB8A67"
},
{
"200": "#E06A3F"
},
{
"300": "#CC5429"
}
],
}
const colors = require("./TailwindCustom/colors.json");
// Will generate classes in this format
// .text-<arrayName>-<key>
// Examples - .text-base-black, .text-primary-200, .text-secondary-100 and so on
// We could define the pattern based on the naming conventions we follow.
const allShades = [].concat
...Object.entries(colors).map(([colorName, colorArray]) =>
colorArray.map((item) => {
const [key, value] = Object.entries(item)[0];
return {
[`.text-${colorName}-${key}`]: { color: value },
};
})
)
);
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
plugins: [
plugin(function ({ addUtilities }) {
// An object of key value pairs for the generated classes will be passed
addUtilities(allShades);
}),
],
};
States and variants
- Classes generated by custom plugin can also be used with states and variants like “sm”, ”md”, “lg”, “hover”, “focus”, etc.
<h1 className="md:title--1 hover:title--2">Custom Tailwind styles</h1>
Reference - https://tailwindcss.com/docs/plugins
Which method according to you will be more efficient and easy to manage?
THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com
You can help me with some donation at the link below Thank you👇👇
☕ --> https://www.buymeacoffee.com/waaduheck <--
Also check these posts as well
08:22
Top comments (3)
Great Tailwind guide. Thanks for creating and sharing it
Thank you so much.
Thanks for sharing this