Styleguide in Tailwind CSS Step by step

When starting work on a new project, whether small or large, it is worth establishing and programming an appropriate Styleguide at the beginning, which will be useful at every stage of the subsequent implementation of the project.

In this article, we will discuss step by step how to create a sample styleguide using TailwindCSS.

We will talk briefly about:

1. Installing TailwindCSS into your project
2. Uploading and configuring add-ons to TailwindCSS
3. Fonts configuration
4. Styling elements using the Tailwind and @apply classes
5. Overwriting and extending Tailwind classes in tailwind.config

1. Install TailwindCSS into your project:

To install Tailwind CSS, you need to use npm or yarn. Open your terminal and run the following command:

npm install tailwindcss

After installing, you need to create a configuration file. You can do this by running:

npx tailwindcss init

This will generate a tailwind.config.js file in your project. Customize this file to tailor Tailwind to your project's needs.

Read more about starting with TailwindCSS in my other article: Tailwind CSS - Beginner's Guide: Where to Start?

2. Uploading and configuring add-ons to TailwindCSS:

Tailwind CSS has a rich ecosystem of plugins and add-ons that you can use to extend its functionality. You can install these add-ons using npm or yarn and then add them to your tailwind.config.js file. For example, if you want to use the Typography plugin, you can install it using:

npm install @tailwindcss/typography

And then add it to your tailwind.config.js:

module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/typography'),
    // other plugins
  ],
}

You can consider using the PrelineUI plugin which can save you a lot of time when it comes to styling different elements such as:

• Dropdowns
• Accordions
• Toggles
• Dark mode (!) and so on, and so on.

Check my other article where I focus on PrelineUI and how it can help you while working with TailwindCSS:
TailwindCSS on hacks: Get to know PrelineUI

3. Font configuration:

Tailwind allows you to configure and use custom fonts easily. In your tailwind.config.js file, you can define the fonts you want to use:

module.exports = {
  // ...
  theme: {
    extend: {
      fontFamily: {
        custom: ['CustomFont', 'sans-serif'],
      },
    },
  },
}

Now, you can apply the font-custom class to use your custom font in your HTML.

4. Styling elements using the Tailwind and @apply classes:

Tailwind CSS provides a vast set of utility classes that you can use directly in your HTML. For example, to style a button, you can use classes like bg-blue-500, text-white, and py-2. You can also create custom styles using the @apply directive in your CSS:

.my-custom-style {
  @apply bg-blue-500 text-white py-2;
  /* additional styles */
}

5. Overwriting and extending Tailwind classes in tailwind.config:

In your tailwind.config.js, you can extend or overwrite existing styles. For example, if you want to change the default padding values, you can do:

module.exports = {
  // ...
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
      },
    },
  },
}

This extends the default spacing options in Tailwind with your custom values. You can similarly extend or override other configuration options to fit your project's style guide.

Summary

Tailwind gives you a lot of options when it comes to creating a styleguide. We briefly discussed a few of them, but that's not all. At every stage of creating a styleguide, it is worth using the Tailwind documentation, which is a mine of knowledge for beginners but also for experienced developers.

💬 Your Thoughts Matter!

If you have any questions or need help with creating your first styleguide with Tailwind - let me know in the comment - I will be happy to help. You can also contact me privately at kontakt@cezarymazur.pl

❤️ React, Share, Save

I also encourage you to leave reactions, comments and save this article for later.

Follow me if you are interested in Tailwind, from time to time I will raise new issues regarding Tailwind and how to work with it even more effectively.

Cezary MazurFollow

Delivering Web Solutions. → Available for work → Frontend Engineering, Web Support, UI Animations → CEO/Software Delivery at wwwell.pl