tailwind.css-data.json

{
  "version": 1.1,
  "atDirectives": [
    {
      "name": "@import",
      "description": "Use the @import directive to inline import CSS files, including Tailwind itself.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#import-directive"
        }
      ],
      "status": "standard"
    },
    {
      "name": "@theme",
      "description": "Use the @theme directive to define your project's custom design tokens, like fonts, colors, and breakpoints.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#theme-directive"
        }
      ],
      "status": "standard"
    },
    {
      "name": "@source",
      "description": "Use the @source directive to explicitly specify source files that aren't picked up by Tailwind's automatic content detection.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#source-directive"
        }
      ],
      "status": "standard"
    },
    {
      "name": "@utility",
      "description": "Use the @utility directive to add custom utilities to your project that work with variants like hover, focus and lg.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#utility-directive"
        }
      ],
      "status": "standard"
    },
    {
      "name": "@variant",
      "description": "Use the @variant directive to apply a Tailwind variant to styles in your CSS.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#variant-directive"
        }
      ],
      "status": "standard"
    },
    {
      "name": "@custom-variant",
      "description": "Use the @custom-variant directive to add a custom variant in your project.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#custom-variant-directive"
        }
      ],
      "status": "standard"
    },
    {
      "name": "@apply",
      "description": "Use the @apply directive to inline any existing utility classes into your own custom CSS.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#apply-directive"
        }
      ],
      "status": "standard"
    },
    {
      "name": "@reference",
      "description": "If you want to use @apply or @variant in the <style> block of a Vue or Svelte component, or within CSS modules, you will need to import your theme variables, custom utilities, and custom variants to make those values available in that context. To do this without duplicating any CSS in your output, use the @reference directive to import your main stylesheet for reference without actually including the styles.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#reference-directive"
        }
      ],
      "status": "standard"
    },
    {
      "name": "@config",
      "description": "Use the @config directive to load a legacy JavaScript-based configuration file.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#config-directive"
        }
      ],
      "status": "nonstandard"
    },
    {
      "name": "@plugin",
      "description": "Use the @plugin directive to load a legacy JavaScript-based plugin.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#plugin-directive"
        }
      ],
      "status": "nonstandard"
    },
    {
      "name": "@tailwind",
      "description": "Use the @tailwind directive to insert Tailwind's base, components, utilities and variants styles into your CSS.",
      "references": [
        {
          "name": "Tailwind V3 Documentation",
          "url": "https://v3.tailwindcss.com/docs/functions-and-directives#tailwind"
        }
      ],
      "status": "obsolete"
    },
    {
      "name": "@layer",
      "description": "Use the @layer directive to tell Tailwind which “bucket” a set of custom styles belong to. Valid layers are base, components, and utilities.",
      "references": [
        {
          "name": "Tailwind V3 Documentation",
          "url": "https://v3.tailwindcss.com/docs/functions-and-directives#layer"
        }
      ],
      "status": "obsolete"
    },
    {
      "name": "@apply",
      "description": "Use the @apply to inline any existing utility classes into your own custom CSS.",
      "references": [
        {
          "name": "Tailwind V3 Documentation",
          "url": "https://v3.tailwindcss.com/docs/functions-and-directives#apply"
        }
      ],
      "status": "standard"
    },
    {
      "name": "@config",
      "description": "Use the @config directive to specify which config file Tailwind should use when compiling that CSS file.",
      "references": [
        {
          "name": "Tailwind V3 Documentation",
          "url": "https://v3.tailwindcss.com/docs/functions-and-directives#config"
        }
      ],
      "status": "nonstandard"
    },
    {
      "name": "@variants",
      "description": "Generate responsive, hover, focus, active and other variants of your own utilities by wrapping their definitions in the @variants directive.",
      "references": [
        {
          "name": "Tailwind V2 Documentation",
          "url": "https://v2.tailwindcss.com/docs/functions-and-directives#variants"
        }
      ],
      "status": "obsolete"
    },
    {
      "name": "@responsive",
      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the @responsive directive.",
      "references": [
        {
          "name": "Tailwind V2 Documentation",
          "url": "https://v2.tailwindcss.com/docs/functions-and-directives#responsive"
        }
      ],
      "status": "obsolete"
    },
    {
      "name": "@screen",
      "description": "The @screen directive allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS.",
      "references": [
        {
          "name": "Tailwind V2 Documentation",
          "url": "https://v2.tailwindcss.com/docs/functions-and-directives#screen"
        }
      ],
      "status": "obsolete"
    }
  ]
}