or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-astrojs--tailwind

Deprecated Astro integration that provides seamless integration between Astro and Tailwind CSS for styling web applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@astrojs/tailwind@6.0.x

To install, run

npx @tessl/cli install tessl/npm-astrojs--tailwind@6.0.0

index.mddocs/

@astrojs/tailwind

@astrojs/tailwind is a deprecated Astro integration that provides seamless integration between Astro and Tailwind CSS for styling web applications. It automatically configures Vite to process Tailwind CSS through PostCSS plugins, supports custom Tailwind configuration, and handles CSS nesting when enabled.

⚠️ This integration is deprecated
Tailwind CSS now offers a Vite plugin which is the preferred way to use Tailwind 4 in Astro.

Package Information

  • Package Name: @astrojs/tailwind
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @astrojs/tailwind
  • Astro Compatibility: ^3.0.0 || ^4.0.0 || ^5.0.0
  • Tailwind Compatibility: ^3.0.24

Core Imports

import tailwind from "@astrojs/tailwind";

For CommonJS:

const tailwind = require("@astrojs/tailwind");

Import base CSS styles:

@import "@astrojs/tailwind/base.css";

Basic Usage

import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";

export default defineConfig({
  integrations: [
    tailwind() // Basic usage with defaults
  ],
});

With configuration options:

import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";

export default defineConfig({
  integrations: [
    tailwind({
      configFile: "./tailwind.config.mjs",
      applyBaseStyles: true,
      nesting: true,
    })
  ],
});

Capabilities

Tailwind Integration Function

Creates an Astro integration that configures Tailwind CSS processing through PostCSS plugins and optionally injects base styles.

/**
 * Creates an Astro integration for Tailwind CSS
 * @param options - Configuration options for the integration
 * @returns AstroIntegration object with setup hooks
 */
export default function tailwindIntegration(options?: TailwindOptions): AstroIntegration;

interface TailwindOptions {
  /**
   * Path to your tailwind config file
   * @default 'tailwind.config.mjs'
   */
  configFile?: string;
  
  /**
   * Apply Tailwind's base styles
   * Disabling this is useful when further customization of Tailwind styles
   * and directives is required. See Tailwind's docs for more details on directives and customization.
   * @default true
   */
  applyBaseStyles?: boolean;
  
  /**
   * Add CSS nesting support using `tailwindcss/nesting`. See Tailwind's docs
   * for how this works with `postcss-nesting` and `postcss-nested`.
   * @default false
   */
  nesting?: boolean;
}

interface AstroIntegration {
  name: string;
  hooks: {
    'astro:config:setup': (params: {
      config: any;
      updateConfig: (config: any) => void;
      injectScript: (location: string, script: string) => void;
    }) => Promise<void>;
  };
}

Usage Examples:

// Default configuration
tailwind()

// Custom config file
tailwind({
  configFile: "./custom-tailwind.config.js"
})

// Disable base styles for custom setup
tailwind({
  applyBaseStyles: false
})

// Enable CSS nesting support
tailwind({
  nesting: true
})

// Combined configuration
tailwind({
  configFile: "./tailwind.config.ts",
  applyBaseStyles: true,
  nesting: true
})

Base CSS Export

Pre-configured CSS file containing standard Tailwind directives.

/* Content of @astrojs/tailwind/base.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

This file can be imported directly in your CSS or referenced in HTML:

<link rel="stylesheet" href="node_modules/@astrojs/tailwind/base.css">

Or imported in CSS/SCSS:

@import "@astrojs/tailwind/base.css";

Integration Behavior

When the integration is added to an Astro project, it:

  1. Configures Vite PostCSS: Automatically sets up PostCSS processing with Tailwind and Autoprefixer plugins
  2. Loads PostCSS Config: Respects existing PostCSS configuration files and merges them with Tailwind setup
  3. Handles CSS Nesting: Optionally adds tailwindcss/nesting plugin when nesting: true
  4. Injects Base Styles: Automatically injects @astrojs/tailwind/base.css import when applyBaseStyles: true
  5. Custom Config Support: Uses specified Tailwind config file or defaults to tailwind.config.mjs

Dependencies

The integration automatically manages these PostCSS plugins:

  • autoprefixer: Adds vendor prefixes to CSS
  • tailwindcss: Core Tailwind CSS processing
  • tailwindcss/nesting (optional): CSS nesting support
  • postcss: CSS transformation framework
  • postcss-load-config: PostCSS configuration loader

Migration Notes

Since this integration is deprecated, consider migrating to Tailwind's native Vite plugin:

// Old: @astrojs/tailwind
import tailwind from "@astrojs/tailwind";

export default defineConfig({
  integrations: [tailwind()],
});

// New: Native Tailwind Vite plugin
import tailwindcss from "tailwindcss";

export default defineConfig({
  vite: {
    css: {
      postcss: {
        plugins: [tailwindcss()],
      },
    },
  },
});