# A Technical Breakdown of My First Tailwind CSS Class

### Introduction

Tailwind CSS is a utility-first CSS framework that enables rapid UI development with pre-defined classes. In my first class, I explored its core principles, setup process, and practical usage. This article breaks down the key technical concepts I learned.

### Setting Up Tailwind CSS

Before using Tailwind, it needs to be installed and configured properly. There are multiple ways to set up Tailwind CSS, including via CDN or npm. In class, we focused on the npm method, which involves:
1. **Installing Tailwind CSS**

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. **Configuring tailwind.config.js**
The content array must be updated to include the project files:

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

3. **Including Tailwind in the CSS File**
Inside input.css, the following directives ensure Tailwind classes are available:

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

4. **Running the Build Process**

npx tailwindcss -i ./src/input.css -o ./output.css --watch

This generates the compiled output.css file that can be linked to the HTML file.
### Utility-First Approach
Unlike traditional CSS, where styles are written in separate stylesheets, Tailwind applies styles directly in the HTML via utility classes. Some of the key utility classes I learned include:
* **Flexbox & Grid**: `flex, grid, justify-center, items-center`
* **Spacing**: `m-4, p-6, mt-10, mb-5`
* **Typography**: `text-xl, font-bold, leading-relaxed`
* **Colors**: `bg-blue-500, text-white, hover:bg-blue-700`
* **Borders & Shadows**: `border, border-gray-300, shadow-lg`
### Example: A Centered Box

<div class="flex justify-center items-center h-screen bg-gray-100">
  <div class="bg-white p-10 rounded-lg shadow-lg text-center">
    <h1 class="text-2xl font-bold">Hello, Tailwind!</h1>
    <p class="text-gray-600 mt-2">This is my first styled component.</p>
  </div>
</div>

### Customization and Extending Tailwind

Tailwind allows customization through tailwind.config.js, where themes can be extended:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#1D4ED8",
      },
    },
  },
};

Now, `bg-primary` can be used in HTML instead of `bg-blue-700`.
### Conclusion
My first class introduced me to the power of Tailwind’s utility-first approach. The ability to style elements rapidly, combined with the flexibility of customization, makes it a powerful tool for modern web development. I look forward to diving deeper into Tailwind’s advanced features like dark mode, animations, and plugins.