Share your tailwindcss theme with the world

Tailwind CSS, the utility first css framework, comes with an amazing default theme that works very well with most of the designs you need to make, but you might want to tweak it a little bit. Changing colors, for example, is one of the most common uses I have found when working with tailwindcss.

Once you have your custom configuration you may want to share it with your team or with the world. Imagine sharing the colors of your company brand, or your new design system. This is now possible with tailwindcss.

Create a tailwindcss plugin

First, create a new file and give it a name. I will use acme-design-system.js as an example:

module.exports = {
    config: {
        //
    },
    handler: function() {
        //
    }
}

This is how you can define a tailwindcss plugin using an object. Inside the config key you can define your own settings, overwrite the default settings or extend the default settings. In this case we will extend the defaults.

module.exports = {
    config: {
        theme: {
            extend: {
                colors:
                    primary: {
                        900: '#055324',
                        800: '#18672B',
                        700: '#298538',
                        600: '#3BA444',
                        500: '#4DBB4E',
                        400: '#6ED36A',
                        300: '#A2E69A',
                        200: '#CBF4C4',
                        100: '#F0FCED',
                    },
                }
            }
        }     
    },

    handler: function({ addUtilities, addComponents}) {
        addUtilities(...);
        addComponents(...);
    }
}

In this example I am adding a new set of colors named primary, and tailwindcss will generate new utilities based on this color. Also, I could add some utilities or components that will be part of the design system.

Require the plugin

Now, you can make use of your plugin. In your tailwind.config.js file, require the plugin file in the plugins section.

module.exports = {
    theme: {
        ...
    },
    plugins: [
        require('acme-design-system.js'),
    ]
};

Then, the plugin will be used whenever you process your tailwindcss config.

Share with the world

Given that a plugin is just a file (acme-design-system.js), you can choose the channel you want to use to share this file, and the way you want to keep it updated.

My choice was to make a npm package and publish it in npm.js. You can see that it is very easy, just by following some simple steps.

Closing

Plugins are not a new thing on tailwindcss, but this new syntax is very useful when working with configuration keys.

Tailwindcss plugins allow many possibilities to extend the framework; this is just one of them.

You can see the package I published in placetopay-org/flate, it is still a work in progress but was designed to fit our needs, and I wanted to share it with you.

Share your thoughts.

Comments

[Pipe Runner]

Even though the snippet needs updating, this is by far the best way to share themes in my opinion without whitelisting a bunch of classes in tailwind.config. This allows me to not only use the config in the ui library, but share the config to the user in case they wish to theme their own components using the custom theme. Thus we always have one source of truth.