Tailwind | Custom Plugins

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

1. addUtilities(), for registering new static utility styles

2. addComponents(), for registering new static component styles

3. addBase(), for registering new base styles

4. 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 - [e-mail]

You can help me with some donation at the link below Thank you👇👇
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well

Button Component with CVA and Tailwind

Shubham Tiwari ・ Feb 12

#nextjs #react #webdev #typescript

08:22

MicroFrontend - React | Solid | Vue

Shubham Tiwari ・ Jan 9

#tutorial #webdev #beginners #learning

15:48

Codium | AI Assistant for DEVs

Shubham Tiwari ・ Jan 4

#vscode #learning #tutorial #beginners

05:25

Zustand - A beginners guides

Shubham Tiwari ・ Nov 21 '23

#webdev #tutorial #react #javascript

Comments

[Devluc]

Great Tailwind guide. Thanks for creating and sharing it

[Md Kawsar Islam Yeasin]

Thank you so much.

[Khaled Md Saifullah]

Thanks for sharing this