or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

examples

edge-cases.md real-world-scenarios.md

guides

plugin-development.md quick-start.md

reference

candidates-variants.md colors-theme.md compilation.md configuration.md design-system.md intellisense.md plugin.md source-maps.md theme.md

index.md

tile.json

Quick Start Guide

This guide walks you through getting started with TailwindCSS v4 programmatic API.

Installation

npm install tailwindcss@4.1.18

Basic Compilation

The core API is the compile() function that processes CSS with TailwindCSS features.

import { compile } from 'tailwindcss';

// Define your CSS with TailwindCSS directives
const css = `
  @theme {
    --color-primary: #3b82f6;
    --color-secondary: #8b5cf6;
  }

  .button {
    @apply bg-primary text-white px-4 py-2 rounded;
  }
`;

// Compile the CSS
const result = await compile(css, {
  base: process.cwd(),
});

// Build final CSS with candidate classes found in your HTML/templates
const candidates = ['bg-primary', 'text-white', 'px-4', 'py-2', 'rounded'];
const output = result.build(candidates);
console.log(output);

Using @apply Directive

When using @apply, you need to either:

Define utilities in @theme (recommended for v4)
Use @source directive to scan files for utilities

Example with @theme:

const css = `
  @theme {
    --color-primary: #3b82f6;
  }

  .button {
    @apply bg-primary text-white;
  }
`;

const result = await compile(css);

Example with @source:

const css = `
  @source "./src/**/*.{js,jsx,ts,tsx}";

  .button {
    @apply bg-blue-500 text-white px-4 py-2;
  }
`;

const result = await compile(css);

Creating a Plugin

Plugins extend TailwindCSS with custom utilities, variants, and components.

import plugin from 'tailwindcss/plugin';

const myPlugin = plugin(function ({ addUtilities, theme }) {
  addUtilities({
    '.scrollbar-hide': {
      '-ms-overflow-style': 'none',
      'scrollbar-width': 'none',
      '&::-webkit-scrollbar': {
        display: 'none',
      },
    },
  });
});

// Use in configuration
export default {
  plugins: [myPlugin],
};

Configuration

Create a tailwind.config.js file:

export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#8b5cf6',
      },
    },
  },

  plugins: [],
};

Next Steps

Read the Compilation API reference for detailed compilation options
Explore Plugin Development guide for advanced plugin creation
Check Real-World Scenarios for common patterns
Review Configuration reference for all configuration options