How to create Tailwind CSS Components for your Website
Tags: css, tailwindcss, programming, webdev
Published: 2021-10-10 01:10:47

---
title: How to create Tailwind CSS Components for your Website
published: true
date: 2021-01-10 01:16:04 UTC
tags: [css, tailwindcss, programming, webdev]
canonical_url: https://www.devwares.com/blog//how-to-create-tailwind-css-components-for-your-website
cover_image: https://www.devwares.com/blog/images/create-tailwind-css-components.png
---

Tailwind CSS is a growing popular Utility-first CSS framework for building custom website components.
It means that it doesn’t provide pre-styled components, unlike other frameworks. It's rather a low-level utility class for styling CSS properties.
Tailwind CSS is continuously growing in popularity especially with the community.
We are going to walk through the process of creating Tailwind CSS components for your website. We are going to build a pricing Component using HTML and Tailwind CSS.

## Table of content

- Prerequisites
- Creating the files
- Installation of Tailwind CSS 
- Configuration of styles
- Building the pricing component
- Conclusion 


## Prerequisites
To follow along with our tailwind CSS tutorial, you need to have a knowledge of the following:
- Knowledge of HTML
- Knowledge of basic CSS
- Knowledge of Tailwind CSS
- Knowledge of Npm

Our pricing component will look like the image below

![Create Tailwind CSS Components](https://www.devwares.com/blog/images/create-tailwind-css-components2.png) 


## Creating the files

The first thing we can do here is to create a folder for our project by running the following on our terminal

**Code:**

```javascript
mkdir website-component
```


`mkdir` creates a folder and you can call your folder any name of your choice. We choose to call our folder website-component.
You can go ahead and change the directory to the new folder you created by running the following command.


**Code:**

```javascript
cd website-component.
```

After this, the next you will need to do is to create package.json file inside the project by running the following command

**Code:**

```javascript
npm init –y.
```

you can now go-ahead to create an Html file with the following code inside.

**HTML CODE:**

```html
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind website Component</title>
</head>
<body>
</body>
</html>
```

## Installation of Tailwind CSS

Tailwind CSS can be used in two different ways. These include the CDN and the package manager.
When using the CDN, you can simply grab the latest configuration build via CDN and link it to the head tag of your HTML

**Code:**

```html
<link href=https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css” rel =”stylesheet”>
```

## Using the Package manger 

To Install Tailwind CSS using Yarn package manager all you need to do is to run the following command on your terminal

**Code:**

```javascript
yarn add tailwindcss
```

This command will add the latest stable version of Tailwind CSS as a dependency.
if you don’t wish to use the yarn. You can proceed to create a default configuration file. This file helps to customize your tailwind CSS installation. You can do this by writing the following command on your terminal.

**Code:**

```javascript
npx tailwindcss init.
```

The command will create a `tailwindcss.config.js` file in the root of your project directory. The file allows you to customize your Tailwind CSS however you wish. If you want to customize your entire tailwind CSS by removing the default. You can add `—full` to your command.

**Code:**

```javascript
npx tailwindcss init –full
```

you can learn more about the customizing your configuration file by checking out the documentation.

## Configuration of styles

At these stage, we are going to configure our styles. Before we can do that, we must first create the styles folder and set up the files. We can create the styles folder by running the following command on our terminal 

**Code:**

```javascript
mkdir <name of the folder>.
```

Next, we create two styles files inside the folder. Styles.css and tailwind.css files. The tailwind.css files will contain the complied output of the styles.css file while the styles.css file is where we will be importing our 

## Tailwind base styles.

You should copy these code and paste on your style.css file.

**Code:**

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

After this, you can proceed to import the tailwind.css file into your project. You can do these as a link to your HTML file.

**Code:**

```html
<link href="styles/tailwind.css" rel="stylesheet">
```

In our tailwind css component, we wish to configure some styles to fit with the project we are going to build. 
First, we create an extend object inside the theme object to configure colors and font of our styles. we can do these by writing the following code

**Code:**

```javascript
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        primary: {
          blue: 'hsl(237, 63%, 64%)',
          'very-light': 'hsl(240,78%, 98%)',
          light: 'hsl(234, 14%,74%)',
          normal: 'hsl(23, 13%, 33%)',
          dark: 'hsl(232,13%,33%)'
        }
      },
      width: {
        custom: '31%'
      }
    },
    fontfamily: {
      sans: [
        'Montserrat',
        'sans-serif',
      ]
    }
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

```

The code above is how your tailwind.config.js file should look after including all the configuration you need. 
We created an extend object on the theme object in order to not remove the entire Tailwind CSS color palate. We rather added our own color palate to the existing ones.  We also added the font-family object in order to add a new font family to our Tailwind CSS component.
The next thing we do is to import the Montserrat we created on our config file to the styles.css file

**Code:**

```css
@import url("https://fonts.googleapis.com/csss2?family=Montserrat:wght@400;700;900&display=swap");
```

We can now compile and build the styles that will be generated from your styles.css file to our tailwind.css file by using the following code on the terminal

**Code:**

```javascript
npx tailwindcss build styles/styles.css –o styles/tailwind.css.
```


This command will generate a unique set of base styles and your custom styles defined in the tailwind.config.js file.
We can now proceed to build our tailwind CSS components
Building the website component
To build any tailwind CSS components for a website, you need to follow the following procedure.

Steps for building Tailwind CSS components
- Install tailwind CSS
- Configure your tailwind CSS style 
- Customize your styles (optional)
- Set up your files 
- Build your Tailwind CSS component
Today, we are going to build a pricing component for a website. We have already gone through the procedure for making a component except for the last part.
We can now proceed by opening our Html file and writing the following code.

**Code:**

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="styles/styles.css" rel="stylesheet">
    <title>Tailwind Pricing Component</title>
</head>

<body class="h-full py-16 antialiased bg-primary-very-light font-sans">
    <header class="flex flex-col items-center mb-12">
        <h2 class="text-3xl text-primary-normal font-bold">Plan and Pricing</h2>
        <div class="pt-8 w-3/5 lg:w-1/5 flex justify-around ">
            <p class="text-sm text-gray-500 font-bold mt-2">Monthly</p>
            <div>
                <label for="toggle" class="relative">
                    <input type="checkbox" name="toggle" id="" class="hidden" />
                    <div class="absolute w-16 h-8 rounded-full shadow-inner inset-y-0 bg-purple-500 "
                      ></div>
                    <div class="absolute w-6 h-6 bg-white rounded-full shadow inset-y-0 mt-1 ml-1 "></div>
                </label>
            </div>
            <p class="text-sm text-gray-500 font-bold mt-2 ml-16">Annually</p>
        </div>
    </header>
    <section class="flex flex-col lg:flex-row items-start items-center lg:justify-center w-full w-full lg:px-10 py-12 ">
        <article class="bg-white w-4/5 lg:w-custom mb-10 lg:px-4 px-6 py-10 text-center text-primary-dark rounded-lg">
            <h5 class="font-bold text-base text-2xl">Free</h5>
            <h2 class="pb-4 flex justify-center font-bold ">
                <span class="text-3xl mt-6 mr-1"></span><span class="text-6xl"> $0</span>
            </h2>
            <ul class="text-sm font-bold">
                <li class="pt-4 pb-4 text-primary-dark">2500 templates and designs</li>
                <li class="pt-3 pb-4 text-primary-dark">2 Users Allowed</li>
                <li class="pt-4 pb-4 text-primary-dark">500GB Storage</li>
            </ul>
            <button
                class=" uppercase text-center text-sm mt-12 xl:px-24 px-12 sm:px-16 py-2 font-bold text-primary-very-light rounded-md bg-purple-500"
        >
                Get Started
            </button>
        </article>
        <article class="lg:w-custom w-4/5 mb-10 px-6 py-16 lg:-mt-6 text-white text-center rounded-lg bg-purple-500"
 >
            <h5 class="font-bold text-base text-2xl">Team</h5>
            <h2 class="font-bold pb-4 mt-2 flex justify-center">
                <span class="text-3xl mt-6 mr-1"></span><span class="text-6xl "> $29.99</span>
            </h2>
            <ul class=" text-sm font-bold">
                <li class="pt-4 pb-4">5000 template and designs</li>
                <li class="pt-4 pb-4">20 Users Allowed</li>
                <li class="pt-4 pb-4 ">1 TB Storage</li>
            </ul>
            <button
                class="uppercase text-center text-sm mt-10 xl:px-24 px-12 sm:px-16 py-2 rounded-md font-bold bg-primary-very-light text-primary-blue">
                Get Started
            </button>
        </article>
        <article class="bg-white w-4/5 lg:w-custom mb-10 lg:px-4 px-6 py-10 text-center text-primary-dark rounded-lg">
            <h5 class="font-bold text-base text-2xl">Enterprise</h5>
            <h2 class="flex justify-center pb-4 font-bold">
                <span class="text-3xl mt-6 mr-1"></span><span class="text-6xl">$49.99</span>
            </h2>
            <ul class="text-sm font-bold">
                <li class="pt-4 pb-4 ">unlimited number of template and designs</li>
                <li class="pt-4 pb-4 ">50 Users Allowed</li>
                <li class="pt-4 pb-4 ">2 TB Storage</li>
            </ul>
            <button
                class="uppercase text-center text-sm mt-12 xl:px-24 px-12 sm:px-16 py-2 rounded-md font-bold text-primary-very-light bg-purple-500"
   >
                Get Started
            </button>
        </article>
    </section>
</body>

</html>
```

When we are done styling our pricing component, our webpage should look like the image below.

![Create Tailwind CSS Components](https://www.devwares.com/blog/images/create-tailwind-css-components3.png)

 
###Conclusion
In our tailwind CSS tutorial today, we learned what Tailwind CSS is, and we proceeded to show how you can set up your project to build tailwind CSS components.  We used the pricing component as an example to build a Tailwind CSS component. I hope you enjoyed the article.

## Design and code Tailwind CSS websites 3x faster

We created a tool to visually build Tailwind CSS components, prototypes, websites, and web apps. Ship projects faster using an intuitive tailwind builder and editor.[Try Windframe out for free.](https://www.devwares.com/windframe)

![WINDFRAME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8w3qu4a93bdkhtjnhbh.png)

## Resources 

- [How to create Tailwind CSS Modal](https://www.devwares.com/blog/how-to-create-tailwind-css-modal)

- [How to use tailwind CSS in HTML]  (https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML)

- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table]
(https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)

- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)