### Install sift-string via npm

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/ThirdPartyNotices.txt

Use this command to install the sift-string package for Browserify or Node.js environments.

```bash
$ npm install sift-string
```

--------------------------------

### Install sift via Component

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/ThirdPartyNotices.txt

Use this command to install the sift package using the Component package manager.

```bash
$ component install timoxley/sift
```

--------------------------------

### Example of Unsorted vs. Sorted Tailwind Classes

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

Demonstrates the visual difference in a class list before and after applying the `Sort Selection` command.

```html
<!-- Before: unsorted classes selected -->
<div class="p-4 flex text-red-500 hover:text-blue-500 items-center bg-white">

<!-- After running Sort Selection -->
<div class="flex items-center bg-white p-4 text-red-500 hover:text-blue-500">
```

--------------------------------

### Install and Run Tailwind CSS Language Server

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

Install the language server globally using npm and run it over stdio, a TCP socket, or node-ipc. Stdio is the most common method for editor integration.

```bash
# Install globally
npm install -g @tailwindcss/language-server

# Run over stdio (most common for editor integration)
tailwindcss-language-server --stdio

# Run over a TCP socket
tailwindcss-language-server --socket=6789

# Run using node IPC
tailwindcss-language-server --node-ipc
```

--------------------------------

### Install @tailwindcss/container-queries Plugin

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/ThirdPartyNotices.txt

Install the container-queries plugin using npm. This command adds the plugin as a development dependency.

```sh
npm install @tailwindcss/container-queries
```

--------------------------------

### Install @tailwindcss/aspect-ratio Plugin

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/ThirdPartyNotices.txt

Install the aspect-ratio plugin using npm. This command adds the plugin as a development dependency.

```sh
npm install -D @tailwindcss/aspect-ratio
```

--------------------------------

### Run Sift Demo Locally

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/ThirdPartyNotices.txt

These commands are used to set up and run the sift demo page locally. First, install development dependencies, then build components and open the demo.

```bash
# run only once to install npm dev dependencies
npm install .
# this will install && build the components and open the demo web page
npm run c-demo
```

--------------------------------

### Debounce Function Example

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/ThirdPartyNotices.txt

This example demonstrates how to use the debounce function to limit the rate at which a function is called. It shows how to set up a debounced event listener and how to clear or flush pending executions.

```javascript
var debounce = require('debounce');
window.onresize = debounce(resize, 200);

function resize(e) {
  console.log('height', window.innerHeight);
  console.log('width', window.innerWidth);
}
```

```javascript
window.onresize.clear();
```

```javascript
window.onresize.flush();
```

```javascript
import { debounce } from "debounce";
```

--------------------------------

### Install Tailwind CSS Language Server

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/README.md

Install the Tailwind CSS Language Server globally using npm. This command is used to set up the server for use in your development environment.

```bash
npm install -g @tailwindcss/language-server
```

--------------------------------

### Define Test Environment with Filesystem

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

Use `defineTest` to create isolated temporary file-system environments for integration tests. It installs npm dependencies before running assertions.

```typescript
import { defineTest, css, html, js } from '../../src/testing'
import { withFixture } from '../common'
import { expect, test } from 'vitest'

// --- Low-level: spin up a real file system ---
defineTest({
  name: 'detects v4 project from CSS import',
  fs: {
    'package.json': json`{ "dependencies": { "tailwindcss": "^4.0.0" } }`,
    'src/app.css':  css`@import "tailwindcss";`,
    'src/index.html': html`<div class="flex"></div>`,
  },
  async handle({ root }) {
    // `root` is a temp dir with the above files and npm dependencies installed
    // perform assertions on the language server's behaviour here
  },
})
```

--------------------------------

### Tailwind CSS Language Mode Example

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

Demonstrates the use of Tailwind CSS language mode with various at-rules like `@theme`, `@utility`, `@variant`, `@apply`, and `@config`.

```css
/* All of these are highlighted correctly in tailwindcss language mode */
@import "tailwindcss";

@theme {
  --color-brand: oklch(55% 0.2 250);
  --spacing-section: 4rem;
}

@utility stack {
  display: flex;
  flex-direction: column;
}

@variant dark (&:where(.dark, .dark *));

.button {
  @apply rounded px-4 py-2 font-bold;
  color: theme(colors.brand);
}
```

--------------------------------

### Get Supported Features by Tailwind Version

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

Use `supportedFeatures` to determine which Tailwind CSS features are available for a given version string. This is crucial for the language server to adapt its behavior based on the installed Tailwind CSS version.

```typescript
import { supportedFeatures } from '@tailwindcss/language-service/src/features'

// Tailwind CSS v4.1+
supportedFeatures('4.1.0', mod)
// → ['css-at-theme', 'layer:base', 'content-list', 'source-inline', 'source-not']

// Tailwind CSS v4.0
supportedFeatures('4.0.0', mod)
// → ['css-at-theme', 'layer:base', 'content-list']

// Tailwind CSS v3.3
supportedFeatures('3.3.0')
// → ['layer:base', 'separator:root', 'content-list', 'jit',
//    'css-at-config-as-project', 'relative-content-paths', 'transpiled-configs']

// Tailwind CSS v3.0
supportedFeatures('3.0.0')
// → ['layer:base', 'separator:root', 'content-list', 'jit']

// Tailwind CSS v2.x
supportedFeatures('2.0.0')
// → ['layer:base', 'separator:root', 'purge-list']
```

--------------------------------

### Example Usage of Tailwind CSS Class Functions

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/vscode-tailwindcss/README.md

Demonstrates how the configured class functions like `tw` and `clsx` are used with Tailwind CSS classes in JavaScript code.

```javascript
let classes = tw`flex bg-red-500`
let classes2 = clsx([
  "flex bg-red-500",
  { "text-red-500": true }
])
let element = tw.div`flex bg-red-500`
```

--------------------------------

### dlv API

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/ThirdPartyNotices.txt

Safely get a dot-notated path within a nested object, with ability to return a default if the full key path does not exist or the value is undefined. It is a small implementation, weighing only 130 bytes.

```APIDOC
## dlv(obj, keypath)

### Description
Safely get a dot-notated path within a nested object, with ability to return a default if the full key path does not exist or the value is undefined.

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- None

### Request Example
```js
// Assuming 'obj' is a nested object and 'keypath' is a string like 'a.b.c'
var value = dlv(obj, 'a.b.c');
var defaultValue = dlv(obj, 'a.b.d', 'default');
```

### Response
#### Success Response (200)
- The value found at the specified keypath, or a default value if provided and the path does not exist.

#### Response Example
- Not applicable for this function.
```

--------------------------------

### `supportedFeatures` — version-to-feature capability map

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

Returns the list of Tailwind CSS features that are available for a given version string. This is used by the language server to adapt its behavior based on the installed Tailwind version.

```APIDOC
## `supportedFeatures` — version-to-feature capability map

Returns the list of Tailwind CSS features that are available for a given version string. Used by the language server to adapt its behaviour (project detection, config loading, content path resolution) based on the installed Tailwind version.

```typescript
import { supportedFeatures } from '@tailwindcss/language-service/src/features'

// Tailwind CSS v4.1+
supportedFeatures('4.1.0', mod)
// → ['css-at-theme', 'layer:base', 'content-list', 'source-inline', 'source-not']

// Tailwind CSS v4.0
supportedFeatures('4.0.0', mod)
// → ['css-at-theme', 'layer:base', 'content-list']

// Tailwind CSS v3.3
supportedFeatures('3.3.0')
// → ['layer:base', 'separator:root', 'content-list', 'jit',
//    'css-at-config-as-project', 'relative-content-paths', 'transpiled-configs']

// Tailwind CSS v3.0
supportedFeatures('3.0.0')
// → ['layer:base', 'separator:root', 'content-list', 'jit']

// Tailwind CSS v2.x
supportedFeatures('2.0.0')
// → ['layer:base', 'separator:root', 'purge-list']
```
```

--------------------------------

### Specify Multiple CSS Entrypoints for Tailwind v4

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/vscode-tailwindcss/README.md

For Tailwind CSS v4 projects with multiple entrypoints, use an object for `tailwindCSS.experimental.configFile`. Each key is a CSS file path, and its value is a glob pattern or array of patterns for files it applies to.

```json
"tailwindCSS.experimental.configFile": {
  "packages/a/src/app.css": "packages/a/src/**",
  "packages/b/src/app.css": "packages/b/src/**"
}
```

--------------------------------

### Tailwind CSS Language Server Options

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/README.md

Displays the available command-line options for running the Tailwind CSS Language Server. These options control how the server communicates and operates.

```bash
Usage: tailwindcss-language-server [options]

Options:

  --stdio          use stdio
  --node-ipc       use node-ipc
  --socket=<port>  use socket
```

--------------------------------

### Connect to Running Language Server with Fixture

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

Use `withFixture` to connect to a running language server pointed at a fixture directory. It exposes a `FixtureContext` for sending LSP requests.

```typescript
withFixture('basic', (c) => {
  test('provides class name completions in HTML', async ({ expect }) => {
    const doc = await c.openDocument({
      lang: 'html',
      text: '<div class=""></div>',
    })

    const result = await c.sendRequest('textDocument/completion', {
      textDocument: { uri: doc.uri },
      position: { line: 0, character: 12 },
      context: { triggerKind: 1 },
    })

    expect(result.items.length).toBeGreaterThan(0)
    expect(result.items.some((i) => i.label === 'flex')).toBe(true)
    expect(result.items.some((i) => i.label === 'hover:')).toBe(true)
  })

  test('provides hover CSS for a class name', async () => {
    const doc = await c.openDocument({
      text: '<div class="flex"></div>',
    })

    const hover = await c.sendRequest('textDocument/hover', {
      textDocument: { uri: doc.uri },
      position: { line: 0, character: 13 }, // over "flex"
    })

    expect(hover.contents.value).toContain('display: flex')
  })
})
```

--------------------------------

### Basic Container Query Usage

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/ThirdPartyNotices.txt

Use the `@container` class to mark an element as a container. Then, apply styles using container variants like `@lg:` to conditionally style child elements based on the container's size.

```html
<div class="@container">
  <div class="@lg:underline">
    <!-- This text will be underlined when the container is larger than `32rem` -->
  </div>
</div>
```

--------------------------------

### Configure Show Pixel Equivalents and Root Font Size

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

Enable `tailwindCSS.showPixelEquivalents` to annotate `rem` values with their `px` equivalent. Configure `tailwindCSS.rootFontSize` to set the base font size for calculations.

```jsonc
// .vscode/settings.json
{
  "tailwindCSS.showPixelEquivalents": true,
  "tailwindCSS.rootFontSize": 16
}
```

--------------------------------

### Arbitrary Container Size Query

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/ThirdPartyNotices.txt

Create one-off container sizes using arbitrary values with the `@[value]:` syntax for conditional styling.

```html
<div class="@container">
  <div class="@[17.5rem]:underline"></div>
    <!-- This text will be underlined when the container is larger than `17.5rem` -->
  </div>
</div>
```

--------------------------------

### `createSettingsCache` — per-document settings resolution

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

Creates a caching settings resolver that fetches both `editor` and `tailwindCSS` configuration sections from the LSP client, merging them with defaults. Results are cached per document URI and invalidated on `onDidChangeConfiguration`.

```APIDOC
## `createSettingsCache` — per-document settings resolution

Creates a caching settings resolver that fetches both `editor` and `tailwindCSS` configuration sections from the LSP client, merging them with defaults. Results are cached per document URI and invalidated on `onDidChangeConfiguration`.

```typescript
import { createConnection } from 'vscode-languageserver/node'
import { createSettingsCache } from './config'

const connection = createConnection()
const cache = createSettingsCache(connection)

// Resolve settings for a specific document URI (scope-aware)
const settings = await cache.get('file:///project/src/App.tsx')

console.log(settings.tailwindCSS.suggestions)          // true
console.log(settings.tailwindCSS.classFunctions)        // ['tw', 'clsx']
console.log(settings.tailwindCSS.lint.cssConflict)      // 'warning'
console.log(settings.tailwindCSS.experimental.configFile) // null

// Global settings (no URI scope)
const global = await cache.get()

// Invalidate on configuration change
cache.clear()
```
```

--------------------------------

### Enable string suggestions in VS Code

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/vscode-tailwindcss/README.md

Update the `editor.quickSuggestions` setting to trigger completions within string content, such as JSX attribute values.

```json
{
  "editor.quickSuggestions": {
    "strings": "on"
  }
}
```

--------------------------------

### Manually Map Tailwind Config/CSS Files

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

Override automatic project discovery to explicitly map Tailwind config and CSS entry files to workspace files. Essential for monorepos or non-standard layouts.

```jsonc
// .vscode/settings.json

// --- Tailwind CSS v4: single CSS entrypoint ---
{
  "tailwindCSS.experimental.configFile": "src/styles/app.css"
}

// --- Tailwind CSS v4: multiple CSS entrypoints in a monorepo ---
{
  "tailwindCSS.experimental.configFile": {
    "packages/marketing/src/app.css": "packages/marketing/src/**",
    "packages/dashboard/src/app.css": "packages/dashboard/src/**"
  }
}

// --- Tailwind CSS v3: single config ---
{
  "tailwindCSS.experimental.configFile": ".config/tailwind.config.js"
}

// --- Tailwind CSS v3: multiple themes ---
{
  "tailwindCSS.experimental.configFile": {
    "themes/light/tailwind.config.js": "themes/light/**",
    "themes/dark/tailwind.config.js":  "themes/dark/**"
  }
}
```

--------------------------------

### Specify Single CSS Entrypoint for Tailwind v4

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/vscode-tailwindcss/README.md

For Tailwind CSS v4 projects, set the `tailwindCSS.experimental.configFile` setting to a string representing the single CSS file that serves as your Tailwind entrypoint.

```json
"tailwindCSS.experimental.configFile": "src/styles/app.css"
```

--------------------------------

### Run Tailwind CSS Language Server

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/README.md

Run the Tailwind CSS Language Server using standard input/output. This is a common way to launch language servers for integration with editors.

```bash
tailwindcss-language-server --stdio
```

--------------------------------

### Custom Class Detection with `tailwindCSS.experimental.classRegex`

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

Configure fine-grained regex-based control for detecting Tailwind class lists in arbitrary string patterns, useful for DSLs and custom utility wrappers not covered by `classFunctions`.

```jsonc
// .vscode/settings.json
{
  "tailwindCSS.experimental": {
    // Single regex — matches the class list directly
    "classRegex": [
      "test (\\S*)",

      // Two-element tuple: outer matches the whole expression,
      // inner matches each individual class within it
      ["clsx\\(([^)]*)\")", "(?:'|"|`) ([^']*)(?:'|"|`)"]
    ]
  }
}
```

--------------------------------

### Specify Multiple Tailwind Config Files for v3 and Earlier

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/vscode-tailwindcss/README.md

For Tailwind CSS v3 projects and earlier with multiple config files, use an object for `tailwindCSS.experimental.configFile`. Each key is a config file path, and its value is a glob pattern or array of patterns for files it applies to.

```json
"tailwindCSS.experimental.configFile": {
  "themes/simple/tailwind.config.js": "themes/simple/**",
  "themes/neon/tailwind.config.js": "themes/neon/**"
}
```

--------------------------------

### Cache Settings with createSettingsCache

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

The `createSettingsCache` function provides a caching mechanism for resolving LSP client settings, merging editor and Tailwind CSS configurations with defaults. Results are cached per document URI and invalidated on configuration changes.

```typescript
import { createConnection } from 'vscode-languageserver/node'
import { createSettingsCache } from './config'

const connection = createConnection()
const cache = createSettingsCache(connection)

// Resolve settings for a specific document URI (scope-aware)
const settings = await cache.get('file:///project/src/App.tsx')

console.log(settings.tailwindCSS.suggestions)          // true
console.log(settings.tailwindCSS.classFunctions)        // ['tw', 'clsx']
console.log(settings.tailwindCSS.lint.cssConflict)      // 'warning'
console.log(settings.tailwindCSS.experimental.configFile) // null

// Global settings (no URI scope)
const global = await cache.get()

// Invalidate on configuration change
cache.clear()
```

--------------------------------

### Specify Single Tailwind Config File for v3 and Earlier

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/vscode-tailwindcss/README.md

For Tailwind CSS v3 projects and earlier, set the `tailwindCSS.experimental.configFile` setting to a string representing the single Tailwind configuration file.

```json
"tailwindCSS.experimental.configFile": ".config/tailwind.config.js"
```

--------------------------------

### `ProjectLocator` — workspace project discovery

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

Scans a workspace folder for Tailwind CSS projects by finding all config files and CSS entry points, resolving their import graphs, and returning structured `ProjectConfig` objects. Handles symlinks, monorepos, and both v3 and v4 project layouts.

```APIDOC
## `ProjectLocator` — workspace project discovery

Scans a workspace folder for Tailwind CSS projects by finding all config files (`.js`/`.ts`/`.mjs`) and CSS entry points, resolving their import graphs, and returning structured `ProjectConfig` objects. Handles symlinks, monorepos, and both v3 and v4 project layouts.

```typescript
import { ProjectLocator } from './project-locator'
import { createResolver } from './resolver'

const resolver = await createResolver({ root: '/my/workspace', pnp: true, tsconfig: true })
const locator  = new ProjectLocator('/my/workspace', globalSettings, resolver)

// Auto-discover all Tailwind projects
const projects = await locator.search()

for (const project of projects) {
  console.log(project.config.path)      // '/my/workspace/tailwind.config.js'
  console.log(project.tailwind.version) // '3.4.18'
  console.log(project.tailwind.features)// ['layer:base', 'jit', 'content-list', ...]
  console.log(project.documentSelector) // [{ pattern: '/my/workspace/src/**', priority: 3 }]
  console.log(project.isUserConfigured) // false
}

// Load from explicit user-provided config → file glob mappings
const explicit = await locator.loadAllFromWorkspace([
  ['src/styles/app.css', ['src/**']],
  ['themes/dark/tailwind.config.js', ['themes/dark/**']],
])
```
```

--------------------------------

### Enable Utility Function Completions with `tailwindCSS.classFunctions`

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

Register JavaScript/TypeScript function names as regex patterns to enable class completions, hover previews, and linting within function calls and tagged template literals.

```jsonc
// .vscode/settings.json
{
  "tailwindCSS.classFunctions": [
    "tw",            // tw`flex bg-red-500`
    "clsx",          // clsx("flex bg-red-500")
    "cn",            // cn("flex", { "text-red-500": true })
    "tw\\.[a-z-]+"  // tw.button`flex bg-red-500`
  ]
}
```

```typescript
// All of these will now receive Tailwind IntelliSense
const base = tw`flex items-center bg-blue-500`
const dynamic = clsx("p-4", { "opacity-50": isDisabled })
const merged = cn("rounded", props.className)
const element = tw.button`px-4 py-2 font-bold`
```

--------------------------------

### Usage of dlv for Deep Object Property Access

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/ThirdPartyNotices.txt

Demonstrates how to use the 'dlv' utility to access nested object properties using dot notation or array paths. It also shows how to provide a default value when a path does not exist or its value is undefined.

```javascript
import delve from 'dlv';

let obj = {
	a: {
		b: {
			c: 1,
			d: undefined,
			e: null
		}
	}
};

//use string dot notation for keys
delve(obj, 'a.b.c') === 1;

//or use an array key
delve(obj, ['a', 'b', 'c']) === 1;

delve(obj, 'a.b') === obj.a.b;

//returns undefined if the full key path does not exist and no default is specified
delve(obj, 'a.b.f') === undefined;

//optional third parameter for default if the full key in path is missing
delve(obj, 'a.b.f', 'foo') === 'foo';

//or if the key exists but the value is undefined
delve(obj, 'a.b.d', 'foo') === 'foo';

//Non-truthy defined values are still returned if they exist at the full keypath
delve(obj, 'a.b.e', 'foo') === null;

//undefined obj or key returns undefined, unless a default is supplied
delve(undefined, 'a.b.c') === undefined;
delve(undefined, 'a.b.c', 'foo') === 'foo';
delve(obj, undefined, 'foo') === 'foo';
```

--------------------------------

### Orchestrate LSP Connection with TW Class

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

The `TW` class manages the Language Server Protocol connection lifecycle, handling project instantiation, request routing, and file watching. It integrates with `vscode-languageserver` to process LSP methods.

```typescript
import { createConnection } from 'vscode-languageserver/node'
import { TW } from './tw'

// Bootstrap the language server
const connection = createConnection(process.stdin, process.stdout)
const tw = new TW(connection)

tw.setup()  // registers onInitialize / onInitialized handlers
tw.listen() // starts the LSP connection

// The TW class handles all LSP methods internally:
// connection.onHover       → tw.onHover(params)
// connection.onCompletion  → tw.onCompletion(params)
// connection.onCodeAction  → tw.onCodeAction(params)
// connection.onDocumentColor → tw.onDocumentColor(params)

// Custom LSP request: sort a list of class strings
const result = await connection.sendRequest('@/tailwindCSS/sortSelection', {
  uri: 'file:///my/project/src/App.tsx',
  classLists: ['p-4 flex text-red-500 hover:text-blue-500 items-center'],
})
// → { classLists: ['flex items-center p-4 text-red-500 hover:text-blue-500'] }

// Custom LSP request: get the Tailwind version for a document
const project = await connection.sendRequest('@/tailwindCSS/getProject', {
  uri: 'file:///my/project/src/App.tsx',
})
// → { version: '4.1.18' }  or  null if not in a Tailwind project
```

--------------------------------

### Named Container Query Usage

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/ThirdPartyNotices.txt

Define named containers with `@container/{name}` and use these names in variants like `@lg/{name}:` to apply styles based on specific named containers.

```html
<div class="@container/main">
  <!-- ... -->
  <div class="@lg/main:underline">
    <!-- This text will be underlined when the "main" container is larger than `32rem` -->
  </div>
</div>
```

--------------------------------

### Configure @tailwindcss/container-queries Plugin

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/ThirdPartyNotices.txt

Add the container-queries plugin to your tailwind.config.js file. This enables utilities for container queries in your project.

```js
// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/container-queries'),
    // ...
  ],
}
```

--------------------------------

### Force CSS Files to Use Tailwind Mode

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

Use `files.associations` in VS Code settings to map all `.css` files to the `tailwindcss` language ID, enabling full CSS IntelliSense alongside Tailwind-specific at-rules.

```jsonc
// .vscode/settings.json — force all .css files to use Tailwind mode
{
  "files.associations": {
    "*.css": "tailwindcss"
  }
}
```

--------------------------------

### VS Code Settings for Tailwind CSS IntelliSense

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

Configure VS Code settings to automatically open CSS files in Tailwind CSS language mode and trigger completions within JSX string attributes.

```jsonc
// .vscode/settings.json — recommended baseline settings
{
  // Always open .css files in Tailwind CSS language mode
  "files.associations": {
    "*.css": "tailwindcss"
  },
  // Trigger completions inside JSX string attributes
  "editor.quickSuggestions": {
    "strings": "on"
  }
}
```

--------------------------------

### Associate CSS files with Tailwind CSS mode

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/vscode-tailwindcss/README.md

Use the `files.associations` setting to ensure VS Code always opens `.css` files in Tailwind CSS mode.

```json
{
  "files.associations": {
    "*.css": "tailwindcss"
  }
}
```

--------------------------------

### `TW` class — LSP connection lifecycle

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

The central orchestrator of the language server. It instantiates project services, registers LSP request/notification handlers, manages file watchers, and routes all LSP requests to the appropriate project.

```APIDOC
## `TW` class — LSP connection lifecycle

The central orchestrator of the language server. Instantiates project services, registers LSP request/notification handlers, manages file watchers, and routes all LSP requests (hover, completion, diagnostics, code actions, etc.) to the appropriate project.

```typescript
import { createConnection } from 'vscode-languageserver/node'
import { TW } from './tw'

// Bootstrap the language server
const connection = createConnection(process.stdin, process.stdout)
const tw = new TW(connection)

tw.setup()  // registers onInitialize / onInitialized handlers
tw.listen() // starts the LSP connection

// The TW class handles all LSP methods internally:
// connection.onHover       → tw.onHover(params)
// connection.onCompletion  → tw.onCompletion(params)
// connection.onCodeAction  → tw.onCodeAction(params)
// connection.onDocumentColor → tw.onDocumentColor(params)

// Custom LSP request: sort a list of class strings
const result = await connection.sendRequest('@/tailwindCSS/sortSelection', {
  uri: 'file:///my/project/src/App.tsx',
  classLists: ['p-4 flex text-red-500 hover:text-blue-500 items-center'],
})
// → { classLists: ['flex items-center p-4 text-red-500 hover:text-blue-500'] }

// Custom LSP request: get the Tailwind version for a document
const project = await connection.sendRequest('@/tailwindCSS/getProject', {
  uri: 'file:///my/project/src/App.tsx',
})
// → { version: '4.1.18' }  or  null if not in a Tailwind project
```
```

--------------------------------

### Discover Tailwind Projects with ProjectLocator

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

The `ProjectLocator` class scans a workspace for Tailwind CSS projects by identifying config files and CSS entry points. It resolves import graphs and handles various project layouts, including symlinks and monorepos.

```typescript
import { ProjectLocator } from './project-locator'
import { createResolver } from './resolver'

const resolver = await createResolver({ root: '/my/workspace', pnp: true, tsconfig: true })
const locator  = new ProjectLocator('/my/workspace', globalSettings, resolver)

// Auto-discover all Tailwind projects
const projects = await locator.search()

for (const project of projects) {
  console.log(project.config.path)      // '/my/workspace/tailwind.config.js'
  console.log(project.tailwind.version) // '3.4.18'
  console.log(project.tailwind.features)// ['layer:base', 'jit', 'content-list', ...]
  console.log(project.documentSelector) // [{ pattern: '/my/workspace/src/**', priority: 3 }]
  console.log(project.isUserConfigured) // false
}

// Load from explicit user-provided config → file glob mappings
const explicit = await locator.loadAllFromWorkspace([
  ['src/styles/app.css', ['src/**']],
  ['themes/dark/tailwind.config.js', ['themes/dark/**']],
])
```

--------------------------------

### Configure @tailwindcss/aspect-ratio Plugin

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/ThirdPartyNotices.txt

Add the aspect-ratio plugin to your tailwind.config.js file. Disable the core aspect-ratio plugin to prevent conflicts with native utilities.

```js
// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  corePlugins: {
    aspectRatio: false,
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
    // ...
  ],
}
```

--------------------------------

### Use @tailwindcss/aspect-ratio for Fixed Aspect Ratio

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/ThirdPartyNotices.txt

Combine `aspect-w-{n}` and `aspect-h-{n}` classes on a parent element to set the aspect ratio for its child. The child element should be the only direct child of this parent.

```html
<div class="aspect-w-16 aspect-h-9">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
```

--------------------------------

### Configure Tailwind CSS Containers

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/ThirdPartyNotices.txt

Extend the default Tailwind CSS container configurations by adding custom container sizes in your `tailwind.config.js` file.

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      containers: {
        '2xs': '16rem',
      },
    },
  },
}
```

--------------------------------

### Add Custom Language Support with `tailwindCSS.includeLanguages`

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

Map custom language IDs to built-in languages like HTML to enable Tailwind CSS IntelliSense features within non-default file types such as plain-text templates, Twig, Blade, and ERB.

```jsonc
// .vscode/settings.json
{
  "tailwindCSS.includeLanguages": {
    "plaintext": "html",   // treat plain-text files as HTML
    "twig": "html",        // Twig templates
    "erb": "html",         // Ruby ERB
    "blade": "html"        // Laravel Blade
  }
}
```

--------------------------------

### Configure @tailwindcss/aspect-ratio Values

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/ThirdPartyNotices.txt

Customize the aspect ratio values generated by the plugin within the `aspectRatio` key in your `tailwind.config.js`. This allows defining custom ratios beyond the defaults.

```js
// tailwind.config.js
module.exports = {
  theme: {
    aspectRatio: {
      1: '1',
      2: '2',
      3: '3',
      4: '4',
    }
  },
  variants: {
    aspectRatio: ['responsive', 'hover']
  }
}
```

--------------------------------

### Analyze Stylesheet for Tailwind Version Detection

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

Uses the `analyzeStylesheet` function to inspect CSS content and determine if it's a Tailwind project root, targetable major versions, and if it explicitly imports Tailwind.

```typescript
import { analyzeStylesheet } from './version-guesser'

// v4 project with explicit import — definitive root
analyzeStylesheet(`@import "tailwindcss";`)
// → { root: true, versions: ['4'], explicitImport: true }

// v4 project using @theme — related but not necessarily a root
analyzeStylesheet(`@theme { --color-brand: oklch(55% 0.2 250); }`)
// → { root: false, versions: ['4'], explicitImport: false }

// v3 project with legacy directives
analyzeStylesheet(`@tailwind base;
@tailwind components;
@tailwind utilities;`)
// → { root: false, versions: ['3'], explicitImport: false }

// Ambiguous file (has @tailwind utilities which is valid in both v3 and v4)
analyzeStylesheet(`@tailwind utilities;`)
// → { root: true, versions: ['4', '3'], explicitImport: false }

// Not related to Tailwind at all
analyzeStylesheet(".btn { color: red; }")
// → { root: false, versions: [], explicitImport: false }
```

--------------------------------

### Remove Aspect Ratio with `aspect-none`

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/ThirdPartyNotices.txt

Use the `aspect-none` class to remove any aspect ratio behavior applied by the plugin. Ensure nested elements with width or height classes are re-declared with appropriate breakpoint prefixes if needed.

```html
<div class="aspect-w-16 aspect-h-9 lg:aspect-none">
  <img src="..." alt="..." class="w-full h-full object-center object-cover lg:w-full lg:h-full" />
</div>
```

--------------------------------

### Configure Tailwind CSS Class Functions

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/README.md

Specify functions or regex patterns to enable completions, hover previews, and linting for Tailwind CSS classes within JavaScript/TypeScript. Matches are limited to function names.

```json
{
  "tailwindCSS.classFunctions": ["tw", "clsx", "tw\\.[a-z-]+"]
}
```

--------------------------------

### debounce API

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/ThirdPartyNotices.txt

Creates and returns a new debounced version of the passed function that will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked. The debounced function has 'clear' and 'flush' methods.

```APIDOC
## debounce(fn, wait, [immediate || false])

### Description
Creates and returns a new debounced version of the passed function that will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked.

Pass `true` for the `immediate` parameter to cause debounce to trigger the function on the leading edge instead of the trailing edge of the wait interval.

The debounced function returned has a property 'clear' that is a function that will clear any scheduled future executions of your function.

The debounced function returned has a property 'flush' that is a function that will immediately execute the function if and only if execution is scheduled, and reset the execution timer for subsequent invocations of the debounced function.

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- None

### Request Example
```js
var debounce = require('debounce');
window.onresize = debounce(resize, 200);

function resize(e) {
  console.log('height', window.innerHeight);
  console.log('width', window.innerWidth);
}

// To later clear the timer and cancel currently scheduled executions:
window.onresize.clear();

// To execute any pending invocations and reset the timer:
window.onresize.flush();
```

### Response
#### Success Response (200)
- Not applicable for this function.

#### Response Example
- Not applicable for this function.
```

--------------------------------

### Configure Tailwind CSS Class Functions

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/vscode-tailwindcss/README.md

Specify functions or tagged template literals that should be treated as Tailwind CSS class containers for completions and linting. Matches are regex patterns applied to function names.

```json
{
  "tailwindCSS.classFunctions": ["tw", "clsx", "tw\.[a-z-]+"]
}
```

--------------------------------

### Configure @tailwindcss/aspect-ratio for Safari 14 Compatibility

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/ThirdPartyNotices.txt

When supporting Safari 14, you may need to explicitly define aspect ratio values in `tailwind.config.js` to ensure compatibility with both the plugin and native Tailwind CSS utilities.

```js
module.exports = {
  // ...
  theme: {
    aspectRatio: {
      auto: 'auto',
      square: '1 / 1',
      video: '16 / 9',
      1: '1',
      2: '2',
      3: '3',
      4: '4',
      5: '5',
      6: '6',
      7: '7',
      8: '8',
      9: '9',
      10: '10',
      11: '11',
      12: '12',
      13: '13',
      14: '14',
      15: '15',
      16: '16',
    },
  },
}
```

--------------------------------

### Add custom language support for Tailwind CSS

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/vscode-tailwindcss/README.md

Use the `tailwindCSS.includeLanguages` setting to add support for additional languages. Specify the language ID and how it should be treated (e.g., `html`, `css`, `javascript`).

```json
{
  "tailwindCSS.includeLanguages": {
    "plaintext": "html"
  }
}
```

--------------------------------

### Configure Tailwind CSS Lint Rule Severity

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

Set the severity for each diagnostic rule (ignore, warning, error). Rules are scoped per language and can be overridden at the workspace or folder level.

```jsonc
// .vscode/settings.json
{
  "tailwindCSS.validate": true,
  "tailwindCSS.lint": {
    // Two classes on the same element that produce the same CSS property
    "cssConflict": "warning",

    // Invalid use of @apply (e.g., applying a non-existent class)
    "invalidApply": "error",

    // Unknown screen name in @screen directive
    "invalidScreen": "error",

    // Unknown variant in @variants directive
    "invalidVariant": "error",

    // Deprecated at-rules such as @tailwind variants
    "deprecatedAtRule": "warning",

    // Invalid path in theme() or config() helpers
    "invalidConfigPath": "error",

    // Unknown argument to @tailwind directive
    "invalidTailwindDirective": "error",

    // Variants not in the recommended order (JIT only)
    "recommendedVariantOrder": "warning",

    // Class used that was blocklisted via @source not inline(…)
    "usedBlocklistedClass": "warning",

    // Class that could be written in a more canonical form
    "suggestCanonicalClasses": "warning"
  }
}
```

--------------------------------

### Bind Tailwind CSS Sort Selection Command to Keyboard Shortcut

Source: https://context7.com/tailwindlabs/tailwindcss-intellisense/llms.txt

Assign a keyboard shortcut to the `tailwindCSS.sortSelection` command. This command sorts selected Tailwind classes in the active document.

```jsonc
// .vscode/keybindings.json — bind to a keyboard shortcut
{
  "key": "ctrl+shift+s",
  "command": "tailwindCSS.sortSelection",
  "when": "editorHasSelection && tailwindCSS.activeTextEditorSupportsClassSorting"
}
```

--------------------------------

### Disabling Container Behavior

Source: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/main/packages/tailwindcss-language-server/ThirdPartyNotices.txt

Use the `@container-normal` class to stop an element from acting as a container, overriding any previous container definitions.

```html
<div class="@container xl:@container-normal">
  <!-- ... -->
</div>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.