Styleguide in Tailwind CSS Step by step
Tags: tailwindcss, css, beginners, webdev
Published: 2024-01-04 06:36:19

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.


![TailwindCSS infos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szeciksuft9f1mjp27v9.png)

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](https://tailwindcss.com/) 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](https://tailwindcss.com/), you need to use npm or yarn. Open your terminal and run the following command:

```bash
npm install tailwindcss
```

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

```bash
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?](https://dev.to/cezarymazur/tailwind-css-beginners-guide-where-to-start-18lo)**

---

## 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:

```bash
npm install @tailwindcss/typography
```

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

```jsx
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.

![PrelineUI gif that is simple CTA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wiyt2hcgmry68b5bnh22.gif)

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](https://dev.to/cezarymazur/tailwindcss-on-hacks-get-to-know-prelineui-4kmo)**

---

## 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:

```jsx
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](https://tailwindcss.com/) 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:



![Styling elements using the Tailwind and @apply classes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2zkbfjswcbjnxfbfsbb.png)

```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:



![Overwriting and extending Tailwind classes in tailwind.config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brhxgafzmt7rir8wu2wn.png)

```jsx
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](mailto: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.

{% user cezarymazur %}