.vscode

settings.json

{
  "css.customData": [
    ".vscode/tailwind.v4.json"
  ]
}

tailwind.v3.json

{
  "$schema": "https://unpkg.com/vscode-css-languageservice@5.1.9/docs/customData.schema.json",
  "version": 1.1,
  "atDirectives": [
    {
      "name": "@tailwind",
      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
        }
      ]
    },
    {
      "name": "@apply",
      "description": "Use @apply to inline any existing utility classes into your own custom CSS.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
        }
      ]
    },
    {
      "name": "@layer",
      "description": "Use the @layer directive to tell Tailwind which 'bucket' a set of custom styles belong to. Valid layers are a base, components, and utilities.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#layer"
        }
      ]
    },
    {
      "name": "@responsive",
      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
        }
      ]
    },
    {
      "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:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
        }
      ]
    },
    {
      "name": "@variants",
      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
        }
      ]
    },
    {
      "name": "@apply",
      "description": "Use `@apply` to inline any existing utility classes into your own custom CSS.\nAny rules inlined with`@apply` will have !important removed by default to avoid specificity issues\n```css\n.select2-dropdown {\n    @apply rounded-b-lg shadow-md;\n  }",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
        }
      ]
    }
  ]
}

tailwind.v4.json

{
  "$schema": "https://unpkg.com/vscode-css-languageservice@5.1.9/docs/customData.schema.json",
  "version": 1.1,
  "atDirectives": [
    {
      "name": "@import",
      "description": "Use the `@import` directive to inline import CSS files, including Tailwind itself. Supports `source()` function to control content detection.",
      "references": [
        {
          "name": "Functions and directives",
          "url": "https://tailwindcss.com/docs/functions-and-directives#import-directive"
        }
      ],
      "descriptors": [
        "@import <string> [source(<source-type>)]?"
      ]
    },
    {
      "name": "@theme",
      "description": "Use the `@theme` directive to define your project's custom design tokens, like fonts, colors, and breakpoints.",
      "references": [
        {
          "name": "Functions and directives",
          "url": "https://tailwindcss.com/docs/functions-and-directives#theme-directive"
        }
      ]
    },
    {
      "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": "Functions and directives",
          "url": "https://tailwindcss.com/docs/functions-and-directives#source-directive"
        }
      ]
    },
    {
      "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": "Functions and directives",
          "url": "https://tailwindcss.com/docs/functions-and-directives#utility-directive"
        }
      ]
    },
    {
      "name": "@variant",
      "description": "Use the `@variant` directive to apply a Tailwind variant to styles in your CSS.",
      "references": [
        {
          "name": "Functions and directives",
          "url": "https://tailwindcss.com/docs/functions-and-directives#variant-directive"
        }
      ]
    },
    {
      "name": "@custom-variant",
      "description": "Use the `@custom-variant` directive to add a custom variant in your project. This lets you write utilities `theme-midnight:bg-black` and `theme-midnight:text-white`.",
      "references": [
        {
          "name": "Functions and directives",
          "url": "https://tailwindcss.com/docs/functions-and-directives#custom-variant-directive"
        }
      ]
    },
    {
      "name": "@apply",
      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS.",
      "references": [
        {
          "name": "Functions and directives",
          "url": "https://tailwindcss.com/docs/functions-and-directives#apply-directive"
        }
      ]
    },
    {
      "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.",
      "references": [
        {
          "name": "Functions and directives",
          "url": "https://tailwindcss.com/docs/functions-and-directives#reference-directive"
        }
      ]
    },
    {
      "name": "@config",
      "description": "Use the `@config` directive to load a legacy JavaScript-based configuration file. The `corePlugins`, `safelist`, and `separator` options from the JavaScript-based config are not supported in v4.0. To safelist utilities in v4 use `@source inline()`.",
      "references": [
        {
          "name": "Functions and directives",
          "url": "https://tailwindcss.com/docs/functions-and-directives#config-directive"
        }
      ]
    },
    {
      "name": "@plugin",
      "description": "Use the `@plugin` directive to load a legacy JavaScript-based plugin. The `@plugin` directive accepts either a package name or a local path.",
      "references": [
        {
          "name": "Functions and directives",
          "url": "https://tailwindcss.com/docs/functions-and-directives#plugin-directive"
        }
      ]
    }
  ]
}