DEV Community

Alex Spinov
Alex Spinov

Posted on

Tailwind CSS Has a Free API You Should Know About

#css #javascript #tailwindcss #webdev

Tailwind CSS v4 brings a completely new architecture — a Rust-powered engine, CSS-first configuration, and a programmatic API for building custom tooling. Here's what's new.

CSS-First Configuration (v4)

No more tailwind.config.js — configure everything in CSS:

/* app.css */
@import "tailwindcss";

@theme {
  --color-brand: #3b82f6;
  --color-brand-dark: #1d4ed8;
  --font-display: "Inter", sans-serif;
  --breakpoint-3xl: 1920px;
  --spacing-18: 4.5rem;
  --animate-slide-in: slide-in 0.3s ease-out;
}

@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* Custom variant */
@variant hocus (&:hover, &:focus);

/* Custom utility */
@utility text-shadow-sm {
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
Enter fullscreen mode Exit fullscreen mode 
<div class="bg-brand text-white font-display p-18 animate-slide-in">
  <button class="hocus:bg-brand-dark text-shadow-sm">Click me</button>
</div>
Enter fullscreen mode Exit fullscreen mode

Plugin API

Create reusable plugins:

// my-plugin.js
import plugin from "tailwindcss/plugin"

export default plugin(function({ addUtilities, addComponents, matchUtilities, theme }) {
  // Static utilities
  addUtilities({
    ".text-balance": { "text-wrap": "balance" },
    ".content-auto": { "content-visibility": "auto" }
  })

  // Dynamic utilities — generates classes like text-shadow-[0_2px_4px_red]
  matchUtilities(
    {
      "text-shadow": (value) => ({ textShadow: value })
    },
    { values: theme("textShadow") }
  )

  // Components
  addComponents({
    ".btn": {
      padding: ".5rem 1rem",
      borderRadius: ".25rem",
      fontWeight: "600",
      "&:hover": { opacity: "0.9" }
    },
    ".btn-primary": {
      backgroundColor: theme("colors.blue.500"),
      color: "white"
    }
  })
})
Enter fullscreen mode Exit fullscreen mode

Programmatic API

Use Tailwind programmatically:

import { compile, env } from "tailwindcss"

// Compile CSS
const input = `
  @import "tailwindcss";
  @theme { --color-brand: #3b82f6; }
`

const compiler = await compile(input)
const output = compiler.build(["bg-brand", "text-white", "p-4", "hover:bg-blue-700"])
console.log(output) // Generated CSS for only these classes
Enter fullscreen mode Exit fullscreen mode

Arbitrary Values & Variants 

<!-- Arbitrary values -->
<div class="bg-[#1a1a2e] text-[14px] p-[clamp(1rem,3vw,2rem)]">
  <img class="w-[calc(100%-2rem)] aspect-[16/9]" />
</div>

<!-- Arbitrary variants -->
<div class="[&>*:nth-child(odd)]:bg-gray-100">
  <p class="[&::first-letter]:text-4xl [&::first-letter]:font-bold">
    Paragraph with styled first letter
  </p>
</div>

<!-- Data attributes -->
<div class="data-[state=open]:bg-green-100 data-[state=closed]:bg-red-100">
  Content
</div>

<!-- Group & peer -->
<div class="group">
  <button>Hover me</button>
  <p class="group-hover:visible group-hover:opacity-100">Tooltip</p>
</div>
Enter fullscreen mode Exit fullscreen mode

Container Queries 

<div class="@container">
  <div class="@sm:grid-cols-2 @lg:grid-cols-3 grid gap-4">
    <div class="@sm:flex-row flex flex-col">
      <!-- Responsive to container, not viewport -->
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Key Takeaways

  • CSS-first config in v4 — no JS config file needed
  • @theme directive for design tokens
  • Plugin API for custom utilities and components
  • Programmatic API for building tools
  • Arbitrary values and variants for one-off styles
  • Container queries for component-level responsiveness
  • 10x faster with Rust-powered engine

Explore Tailwind CSS docs for the complete API.

Building web scrapers or data pipelines? Check out my Apify actors for ready-made solutions, or email spinov001@gmail.com for custom development.

Top comments (0)