Preset sharing across projects in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a Tailwind CSS preset?

A Tailwind CSS preset is a reusable configuration file that contains shared design tokens, plugins, and settings. It helps keep styles consistent across multiple projects by sharing the same base setup.

intermediate

How do you share a Tailwind preset across projects?

You create a separate npm package with your Tailwind preset configuration. Then, install that package in each project and reference it in the tailwind.config.js file under the presets array.

beginner

Why use Tailwind presets instead of copying config files?

Presets allow you to update shared styles in one place. All projects using the preset get the update automatically, avoiding mistakes and saving time compared to copying config files manually.

beginner

What is the key field in tailwind.config.js to add a preset?

The key field is <code>presets</code>. It is an array where you import and add your preset package to extend your Tailwind configuration.

intermediate

Can Tailwind presets include plugins and custom utilities?

Yes! Presets can include plugins, custom utilities, theme extensions, and variants. This makes them powerful for sharing complex design systems across projects.

What is the main benefit of using Tailwind presets across projects?

A To share and update design settings easily in multiple projects

B To reduce the size of CSS files

C To avoid using npm packages

D To disable Tailwind plugins

Tailwind presets help share and update design settings easily across projects by centralizing configuration.

Where do you add a Tailwind preset in your project?

A In the CSS file directly

B In the <code>presets</code> array inside tailwind.config.js

C In the package.json file

D In the <code>plugins</code> array inside tailwind.config.js

Presets are added in the presets array inside the tailwind.config.js file.

How do you distribute a Tailwind preset to other projects?

A Embed it in HTML files

B Copy the config file manually

C Use a CDN link

D Publish it as an npm package

Publishing the preset as an npm package allows easy installation and updates across projects.

Can Tailwind presets include custom colors and fonts?

A Yes, presets can extend themes with custom colors and fonts

B No, presets only include plugins

C No, presets cannot change themes

D Only fonts, not colors

Presets can extend the theme with custom colors, fonts, and other design tokens.

What happens when you update a Tailwind preset package?

A Only new projects get the update

B Projects must copy the config again manually

C All projects using it get the updated styles after reinstalling

D The preset stops working

Updating the preset package and reinstalling it in projects applies the new styles everywhere.

Explain how to create and use a Tailwind preset to share styles across multiple projects.

Think about packaging config and referencing it in projects.

Describe the benefits of using Tailwind presets instead of copying config files between projects.

Focus on maintenance and consistency advantages.