Creating Configuration Presets

If we want to reuse our configuration across different projects, Tailwind offers us a way to do so by creating reusable configuration presets. A configuration preset is a number of settings defined in the exact same way as those from the tailwind.config.js file. The only difference is that they’re put in a separate file.

Using presets is very useful for creating branding and/or design systems.

Example usage of presets

Let’s suppose we have brand colors that we want to use in a project or perhaps in multiple projects. In this scenario, we can create a preset with the brand colors. Let’s create a brand-colors-preset.js file and put the following content inside: