Step-by-Step Guide: How to Use Tailwind

When building modern web applications, especially with frameworks like React or Vue, you want a smooth way to manage styles that keeps your design consistent without writing excessive CSS. Enter Tailwind CSS! This utility-first CSS framework has been gaining popularity for its simplicity and flexibility. In this blog post, we’ll walk through how to set up and use Tailwind with either React or Vue, and show how you can effortlessly create beautiful, responsive interfaces with minimal custom CSS.

What is Tailwind CSS?
Tailwind CSS is different from traditional CSS frameworks like Bootstrap. Instead of giving you pre-designed components, Tailwind gives you low-level utility classes that you can use to build custom designs directly in your HTML. This approach allows for greater flexibility without the need for constantly writing custom CSS.

Some of the key benefits of using Tailwind include:

• Rapid Prototyping: You can create responsive designs quickly by stacking utility classes.
• Customizable: Tailwind is highly customizable via its configuration file, allowing you to adapt it to your project’s design needs.
• Responsive Design: Tailwind’s built-in responsiveness means you can easily apply breakpoints without writing media queries.

Setting Up Tailwind with React

Let’s start with React. Here’s a step-by-step guide to getting Tailwind CSS working in a React project:

Step 1: Create a React Project

If you don’t already have a React project, create one using Create React App:

npx create-react-app my-tailwind-react-app
cd my-tailwind-react-app

Step 2: Install Tailwind

Next, you’ll need to install Tailwind and its dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

This will generate a tailwind.config.js file, which you can customize later for things like themes, colors, and fonts.

Step 3: Configure Tailwind

Open tailwind.config.js and add the paths to all your template files under content. This step ensures Tailwind purges any unused styles, optimizing your final bundle size.

module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 4: Include Tailwind in your CSS

Create a CSS file in your src directory, typically called index.css or styles.css, and import Tailwind’s base styles:

@tailwind base;
@tailwind components;
@tailwind utilities;

Then, import this CSS file into your index.js file:

import './index.css';

Step 5: Start Using Tailwind Classes in React Components

Now you can start using Tailwind classes directly in your JSX. Here’s a basic example:

function App() {
  return (
    <div className="bg-gray-100 min-h-screen flex items-center justify-center">
      <h1 className="text-3xl font-bold text-blue-500">
        Welcome to My React App with Tailwind!
      </h1>
    </div>
  );
}

export default App;

In this example, the div is styled using Tailwind classes like bg-gray-100, min-h-screen, and flex, making it quick and easy to build a responsive layout without touching CSS files.

Setting Up Tailwind with Vue

Next, let’s explore how to set up Vue with Tailwind. The steps are similar to React, but with slight differences in project setup.

Step 1: Create a Vue Project

If you haven’t created a Vue project yet, use Vue CLI to set one up:

vue create my-tailwind-vue-app
cd my-tailwind-vue-app

Step 2: Install Tailwind

Just like with React, you’ll need to install Tailwind and related dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Step 3: Configure Tailwind

Open the tailwind.config.js file and configure the content section to look for Vue components:

module.exports = {
  content: [
    './src/**/*.{vue,js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 4: Include Tailwind in Your CSS

In Vue, you’ll typically create a main.css file inside the src folder and import Tailwind’s core styles:

@tailwind base;
@tailwind components;
@tailwind utilities;

Then, include this CSS file in your main.js file:

import { createApp } from 'vue';
import App from './App.vue';
import './assets/main.css';

createApp(App).mount('#app');

Step 5: Use Tailwind Classes in Vue Components

With everything set up, you can now use Tailwind in your Vue components. Here’s an example of a simple Vue component:

<template>
  <div class="bg-gray-200 h-screen flex justify-center items-center">
    <h1 class="text-4xl font-bold text-green-500">
      Welcome to My Vue App with Tailwind!
    </h1>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

As in React, you can combine Tailwind utility classes directly in your HTML templates to create flexible and responsive UIs.

Customizing Tailwind for Your Project

While using Tailwind’s default utility classes is great for rapid prototyping, you’ll eventually want to customize the framework to match your project’s design system. Luckily, Tailwind makes this easy through its configuration file.

For example, to extend the color palette, you can modify the tailwind.config.js like so:

module.exports = {
  theme: {
    extend: {
      colors: {
        customBlue: '#1c92d2',
      },
    },
  },
};

Now, you can use the custom color in your components:

<div className="text-customBlue">Custom Blue Text</div>

Why Tailwind Works Well with React and Vue

Tailwind’s utility-first approach pairs perfectly with component-based frameworks like React and Vue. Instead of worrying about scoping CSS or handling naming conflicts, you can focus entirely on building your components and applying styles inline using utility classes.

This reduces the need for writing large, project-specific CSS files and keeps your component code and styles tightly coupled, leading to a more maintainable and scalable codebase.

Conclusion

If you’re looking for a way to streamline your styling process while using React or Vue, Tailwind is an excellent choice. By following the setup steps outlined in this post, you can start building responsive, stylish UIs quickly and efficiently. Whether you’re just starting out or already experienced with these frameworks, integrating Tailwind can make your development process smoother and more enjoyable.

Happy coding!