DEV Community

Alex Spinov
Alex Spinov

Posted on

Tailwind CSS Has a Free API — Here's How to Build Beautiful UIs Without Writing CSS

#css #tailwindcss #webdev #frontend

Tailwind CSS is a utility-first CSS framework that lets you build modern UIs directly in your HTML. No custom CSS files, no naming conventions — just compose utility classes.

Installation 

npm install tailwindcss @tailwindcss/vite
Enter fullscreen mode Exit fullscreen mode

Vite Setup 

// vite.config.ts
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()]
});
Enter fullscreen mode Exit fullscreen mode 
/* app.css */
@import "tailwindcss";
Enter fullscreen mode Exit fullscreen mode

Core Concepts 

<!-- Responsive card -->
<div class="max-w-sm rounded-xl shadow-lg overflow-hidden bg-white">
  <img class="w-full h-48 object-cover" src="photo.jpg" alt="" />
  <div class="p-6">
    <h2 class="text-xl font-bold text-gray-900">Card Title</h2>
    <p class="mt-2 text-gray-600">Description text goes here.</p>
    <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
      Learn More
    </button>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Responsive Design 

<!-- Mobile-first responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div class="p-4 bg-white rounded-lg shadow">Item 1</div>
  <div class="p-4 bg-white rounded-lg shadow">Item 2</div>
  <div class="p-4 bg-white rounded-lg shadow">Item 3</div>
</div>

<!-- Hidden on mobile, visible on desktop -->
<nav class="hidden md:flex gap-4">
  <a href="/" class="text-gray-700 hover:text-blue-600">Home</a>
  <a href="/about" class="text-gray-700 hover:text-blue-600">About</a>
</nav>
Enter fullscreen mode Exit fullscreen mode

Dark Mode 

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h1 class="text-2xl font-bold">Works in both modes</h1>
  <p class="text-gray-600 dark:text-gray-400">Automatically adapts</p>
</div>
Enter fullscreen mode Exit fullscreen mode

Animations 

<button class="transform hover:scale-105 transition duration-200 ease-in-out">
  Hover me
</button>

<div class="animate-pulse bg-gray-200 rounded h-4 w-3/4"></div>
<div class="animate-spin h-8 w-8 border-4 border-blue-500 border-t-transparent rounded-full"></div>
Enter fullscreen mode Exit fullscreen mode

Custom Styles 

@import "tailwindcss";

@theme {
  --color-brand: #3b82f6;
  --font-display: "Inter", sans-serif;
}
Enter fullscreen mode Exit fullscreen mode 
<h1 class="text-brand font-display text-4xl">Custom Theme</h1>
Enter fullscreen mode Exit fullscreen mode

Need to extract or automate web content at scale? Check out my web scraping tools on Apify — no coding required. Or email me at spinov001@gmail.com for custom solutions.

Top comments (0)