How to Create a Preset in Tailwind

“Tailwind CSS” performs all of its custom configurations in the “tailwind.config.js” file that is automatically merged with the default configuration. In such cases, “Tailwind Presets” helps the users to build their own configurations separately. “Tailwind Presets” is basically the user-reusable configuration that specifies a separate configuration that can be used as the base. It provides the easiest way to build up the customization that the user wants to reuse across multiple projects. It assists the users in completely replacing the default Tailwind configuration.

This article elaborates on the complete procedure to create a preset in Tailwind.

How to Create a “Preset” in Tailwind?

Tailwind “Presets” are considered the regular configuration objects that specify the same configuration as specified in the “tailwind.config.js” configuration file. The “preset” file is not created by default however it can be created by following the below-given steps:

Step 1: Create a “Preset” File

First, create a “preset.js” file in the Tailwind project and add all the desired configuration options such as extensions, theme overrides, adding plugins, and much more:

Press “Ctrl+S” to save the above file. 

Step 2: Edit the “tailwind.config.js” File

Next, navigate to the “tailwind.config.js” configuration file, specify the name of the template paths as well as specify the “preset.js” file with the “presets” keyword:

Press “Ctrl+S” to save the file.

Step 3: Run the Application

Now, run the existing “vite-project” in the development server by entering the following command:

Lastly, click on the “localhost” link to show the output.

Output

As seen, the output returns a vite project with “Tailwind CSS” styling. 

Conclusion

In Tailwind, create a “preset” file in the project and specify all the configurations of the “tailwind.config.js” file in it. After that, specify the “preset.js” file in the “tailwind.config.js” file with the help of the “preset” keyword. The newly created “preset.js” file will embed all the custom CSS on the specified template same as the “tailwind.config.js” file. This article demonstrated the complete procedure to create a preset in Tailwind.