Preset sharing across projects in Tailwind - Mini Project: Build & Apply

Preset Sharing Across Projects with Tailwind CSS

📖 Scenario: You are working on multiple web projects that use Tailwind CSS. To keep your design consistent and save time, you want to share a preset of colors and fonts across these projects.

🎯 Goal: Create a Tailwind CSS preset file with custom colors and fonts, then use this preset in a simple HTML page to apply the shared styles.

📋 What You'll Learn

Create a Tailwind CSS preset file named my-preset.js with custom colors and fonts

Add a configuration variable to import the preset in your Tailwind config

Use the preset in the Tailwind config file to apply shared styles

Create a simple HTML page that uses Tailwind classes from the preset

💡 Why This Matters

🌍 Real World

Sharing Tailwind CSS presets helps teams keep consistent design styles across multiple projects without repeating configuration.

💼 Career

Front-end developers often create and maintain design systems and style presets to improve efficiency and consistency in large codebases.

1

Create the Tailwind CSS preset file

Create a file named my-preset.js that exports a Tailwind CSS preset object. This preset should add a custom color named brandBlue with the value #1DA1F2 and a custom font family named brandFont with the value 'Arial, sans-serif'.

Tailwind

// Your code here to create my-preset.js with custom colors and fonts

Need a hint?

Use module.exports to export an object with theme.extend.colors and theme.extend.fontFamily.

2

Import the preset in Tailwind config

In your tailwind.config.js file, create a constant named myPreset that requires the ./my-preset.js file.

Tailwind

// Your code here to import my-preset.js

Need a hint?

Use require('./my-preset.js') and assign it to myPreset.

3

Use the preset in Tailwind config

In tailwind.config.js, export a configuration object that uses the myPreset in the presets array.

Tailwind

module.exports = {
  // Add the presets array here
  // Your code here
};

Need a hint?

Set module.exports to an object with a presets array containing myPreset.

4

Create an HTML page using the preset styles

Create a simple HTML file named index.html that includes Tailwind CSS and uses the brandBlue color as a background and the brandFont font family for a heading. Use the classes bg-brandBlue and font-brandFont on the <h1> element.

Tailwind

Need a hint?

Use bg-brandBlue and font-brandFont classes on the <h1> tag.