How to Use Tailwind CSS to Rapidly Develop Snazzy Websites
Tags: css, webdev, codenewbie, beginners
Published: 2023-04-10 13:00:00

As a developer, you probably want to find ways to get more done with less code. That's where a frontend framework like Tailwind CSS comes in. 

In this article, we'll dive into how Tailwind CSS can simplify your web design and development process. We'll show you how to get started with Tailwind, check out some real-life examples, and even create custom styles and plugins. 

Let's get started!

## **How to Get Started With Using Tailwind CSS**

Before installing Tailwind CSS and integrating it into your project, make sure that:

1. You have [Node.js installed on your computer](https://kinsta.com/blog/how-to-install-node-js/) to make use of the [Node package manager (npm)](https://kinsta.com/knowledgebase/what-is-node-js/#what-is-npm) in the terminal.
    
2. Your project is all set up with your files created.
    

This is what our project structure looks like at the moment:

```md
-Tailwind-tutorial
    -public
        -index.html
        -styles.css
    -src
        -styles.css
```

Next, start up a terminal for your project and run the following commands:

```bash
    npm install -D tailwindcss
```

The above command will install the Tailwind CSS framework as a dependency. Next, generate your tailwind.config.js file by running the command below:

```bash
    npm install -D tailwindcss
```

The tailwind.config.js file will be empty when created, so we’ve to add some lines of code:

```javascript
module.exports = {
  content: ["./src/**/*.{html,js}", "./public/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

The file paths provided in the content array will enable Tailwind to purge/remove any unused styles during build time.

The next thing to do is to add the “@tailwind” directives to your CSS file in the **src** folder — this is where Tailwind generates all of its predefined utility styles for you:

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

The last thing to do is to start the build process by running this command in your terminal:

```bash
    npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch
```

In the code above, we’re telling Tailwind that our input file is the stylesheet in the src folder and that whatever styles we’ve used have to be built into the output file in the public folder. `--watch` allows Tailwind to watch your file for changes for an automatic build process; omitting it means we’ve to run that script every time we want to build our code and see the desired output.

### **Using Tailwind CSS**

Now that we’ve installed and set up Tailwind CSS for our project, let’s see some examples to understand its application fully.

#### **Flexbox Example**

To use [flex](https://kinsta.com/blog/responsive-web-design/) in Tailwind CSS, you need to add a class of flex and then the direction of the flex items:

```html
    <div class="flex flex-row">
      <button> Button 1 </button>
      <button> Button 2 </button>
      <button> Button 3 </button>
    </div>
```


![Our three purple buttons.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zp2rfep2cdfs1ebri53.png)


Using `flex-row-reverse` will reverse the order in which the buttons appear.

`flex-col` stacks them above each other. Here is an example:

```html
    <div class="flex flex-col">
      <button> Button 1 </button>
      <button> Button 2 </button>
      <button> Button 3 </button>
    </div>
```


![Our three purple buttons.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tlf4r2a88wl9p15wt8y.png)


Just like the previous example, `flex-col-reverse` reverses the order.

#### **Grid Example**

When specifying columns and rows in the grid system, we take a different approach by passing in a number that will determine how the elements will occupy available space:

```html
<div class="grid grid-cols-3">
      <button> Button 1 </button>
      <button> Button 2 </button>
      <button> Button 3 </button>
      <button> Button 4 </button>
      <button> Button 5 </button>
      <button> Button 6 </button>
    </div>
```


![Our six purple buttons.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80hckpaw30xlzwaieiaz.png)


#### **Colors**

Tailwind comes with a lot of predefined colors. Each color has a set of different variations, with the lightest variation being 50 and the darkest being 900.

Here is a picture of multiple colors and their [HTML hex codes](https://kinsta.com/blog/html-font-color/) to illustrate this


![Customizing colors from Tailwind’s default palette.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7y5wiix83l95009hr2dp.png)

Customizing colors from Tailwind’s default palette. ([Image source)](https://tailwindcss.com/docs/customizing-colors#default-color-palette)

We’ll give an example of how you can do this using the red color above to give a button element a background color:

```html
<button class="bg-red-50">Click me</button>
<button class="bg-red-100">Click me</button>
<button class="bg-red-200">Click me</button>
<button class="bg-red-300">Click me</button>
<button class="bg-red-400">Click me</button>
<button class="bg-red-500">Click me</button>
<button class="bg-red-600">Click me</button>
<button class="bg-red-700">Click me</button>
<button class="bg-red-800">Click me</button>
<button class="bg-red-900">Click me</button>
```

This syntax is the same for all colors in Tailwind except for black and white, which are written the same way but without the use of numbers: `bg-black` and `bg-white`.

To add text color, you use the class `text-{color}`:

```html
<p class="text-yellow-600">Hello World</p>
```

#### **Padding**

Tailwind already has a design system that would help you keep a consistent scale across your designs. All you have to know is the syntax for applying each utility.

The following are utilities for adding padding to your elements:

* `p` denotes padding across the whole element.
    
* `py` denotes padding padding-top and padding-bottom.
    
* `px` denotes padding-left and padding-right.
    
* `pt` denotes padding-top.
    
* `pr` denotes padding-right.
    
* `pb` denotes padding-bottom.
    
* `pl` denotes padding-left
    

To apply them to your elements, you’d have to use the appropriate numbers provided by Tailwind — a bit similar to the numbers that represented color variants in the last section. Here’s what we mean:

```html
<button class="p-0">Click me</button>
<button class="pt-1">Click me</button>
<button class="pr-2">Click me</button>
<button class="pb-3">Click me</button>
<button class="pl-4">Click me</button>
```

#### **Margin**

The predefined utilities for padding and margin are very similar. You have to replace the `p` with an `m`:

* `m`
    
* `my`
    
* `mx`
    
* `mt`
    
* `mr`
    
* `mb`
    
* `ml`
    

## **How to Create a Tailwind CSS Plugin**

Even though Tailwind CSS has loads of utilities and design systems already built for you, it’s still possible that you may have a particular functionality that you would like to add to extend what Tailwind can be used for. Tailwind CSS allows us to do this by creating a plugin.

Let’s get our hands dirty by creating a plugin that adds the aqua color and a rotate utility that rotates an element 150º on the X-axis. We’ll make these utilities in the **tailwind.config.js** file using a little bit of [JavaScript](https://kinsta.com/knowledgebase/what-is-javascript/).

```javascript
const plugin = require("tailwindcss/plugin");

module.exports = {
  content: ["./src/**/*.{html,js}", "./public/*.html"],
  theme: {
    extend: {},
  },
  plugins: [
    plugin(function ({ addUtilities }) {
      const myUtilities = {
        ".bg-aqua": { background: "aqua" },
        ".rotate-150deg": {
          transform: "rotateX(150deg)",
        },
      };
      addUtilities(myUtilities);
    }),
  ],

};
```

Now, let’s break this down. The first thing we did was to import Tailwind’s plugin function:

```javascript
const plugin = require("tailwindcss/plugin");
```

Then we went on to create our plugins in the plugins array:

```javascript
  plugins: [
    plugin(function ({ addUtilities }) {
      const newUtilities = {
        ".bg-aqua": { background: "aqua" },
        ".rotate-150deg": {
          transform: "rotateX(150deg)",
        },
      };
      addUtilities(newUtilities);
    }),
  ],
```

You might have to rerun the build script after making your plugin.

Now that the plugins have are ready, we can test them:

```html
<button class="bg-aqua rotate-150deg">Click me</button>
```

If you did everything right, you should have a button with an aqua color with the text rotated to 150º on the X-axis.

## **Summary**

Frameworks can be a lifesaver for streamlining your work. They make creating attractive, professional websites a breeze and keep your design consistent. Tailwind CSS offers many helpful CSS classes to upgrade your web design game.

You now have a good basic understanding of how Tailwind works. However, to become a pro at using this utility-focused framework, you'll need to keep practicing and brush up on your CSS skills if needed.

Read more here: [https://kinsta.com/topic/web-development-tools/](https://kinsta.com/topic/web-development-tools/)