or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

examples

edge-cases.mdreal-world-scenarios.md

guides

plugin-development.mdquick-start.md

reference

candidates-variants.mdcolors-theme.mdcompilation.mdconfiguration.mddesign-system.mdintellisense.mdplugin.mdsource-maps.mdtheme.md
index.md
tile.json

tessl/npm-tailwindcss

Utility-first CSS framework with programmatic compilation API, plugin system, and theme management for building custom interfaces.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/tailwindcss@4.1.x

To install, run

npx @tessl/cli install tessl/npm-tailwindcss@4.1.1

index.mddocs/

TailwindCSS

TailwindCSS is a utility-first CSS framework with a programmatic API for CSS compilation, plugin system, and theme management. Version 4.x introduces an AST-based architecture with direct compilation APIs and extensive TypeScript support.

Quick Start

import { compile } from 'tailwindcss';

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

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

const result = await compile(css, { base: process.cwd() });
const output = result.build(['bg-primary', 'text-white', 'px-4', 'py-2', 'rounded']);

Installation: npm install tailwindcss@4.1.18

Documentation: https://tailwindcss.com

Core Concepts

TailwindCSS v4 provides:

  • Compilation API: compile() and compileAst() for processing CSS with @apply, @theme, utilities, and variants
  • Plugin System: Extensible API for adding custom utilities, variants, and components
  • Theme Management: CSS variable-based theming with programmatic access
  • Design System: Central coordination object for theme, utilities, variants, and compilation
  • Type Safety: Full TypeScript support with comprehensive type definitions

Quick Reference

Core Imports

import { compile, compileAst, type CompileOptions } from 'tailwindcss';
import plugin from 'tailwindcss/plugin';
import colors from 'tailwindcss/colors';
import defaultTheme from 'tailwindcss/defaultTheme';

Main APIs

APIPurposeReference
compile()Compile CSS with TailwindCSS processingCompilation
plugin()Create custom pluginsPlugin API
UserConfigConfiguration interfaceConfiguration
DesignSystemTheme, utilities, variants coordinationDesign System
ThemeProgrammatic theme managementTheme System

Key Types

// Compilation
function compile(css: string, opts?: CompileOptions): Promise<CompileResult>;
interface CompileResult {
  build: (candidates: string[]) => string;
  buildSourceMap: () => DecodedSourceMap;
  features: Features;
  sources: { base: string; pattern: string; negated: boolean }[];
  root: Root;
}

// Plugin
function plugin(handler: (api: PluginAPI) => void, config?: Partial<Config>): PluginWithConfig;
interface PluginAPI {
  addUtilities(utilities: Record<string, CssInJs> | Record<string, CssInJs>[]): void;
  addComponents(utilities: Record<string, CssInJs> | Record<string, CssInJs>[]): void;
  addVariant(name: string, variant: string | string[] | CssInJs): void;
  matchUtilities(utilities: Record<string, (value: string, extra: { modifier: string | null }) => CssInJs>): void;
  theme(path: string, defaultValue?: any): any;
  config(path?: string, defaultValue?: any): any;
  prefix(className: string): string;
}

// Configuration
interface UserConfig {
  presets?: UserConfig[];
  theme?: ThemeConfig;
  plugins?: Plugin[];
  content?: ContentFile[] | { relative?: boolean; files: ContentFile[] };
  darkMode?: DarkModeStrategy;
  prefix?: string;
  blocklist?: string[];
  important?: boolean | string;
  future?: 'all' | Record<string, boolean>;
  experimental?: 'all' | Record<string, boolean>;
}

Documentation Structure

Guides

Examples

Reference

Common Workflows

Compile CSS

import { compile } from 'tailwindcss';

const result = await compile(css, { base: './src' });
const output = result.build(candidates);

Create Plugin

import plugin from 'tailwindcss/plugin';

const myPlugin = plugin(function ({ addUtilities }) {
  addUtilities({
    '.custom': { display: 'flex' },
  });
});

Configure Theme

export default {
  theme: {
    extend: {
      colors: { primary: '#3b82f6' },
    },
  },
};

Architecture Overview

TailwindCSS v4 architecture:

  • Compilation Layer: Processes CSS with TailwindCSS directives (@apply, @theme, @source)
  • Design System: Coordinates theme, utilities, variants, and compilation
  • Plugin System: Extensible architecture for custom functionality
  • Theme System: CSS variable-based theming with programmatic resolution
  • Compatibility: Backward compatibility with v3 API (colors, defaultTheme, plugins)

Package Information