vue-tailwind-block
API

Core

Compile a block from your own code.

These APIs are designed for build tool authors, custom bundler plugins, and CLI scripts. If you are developing a Vue or Nuxt application, the Vite plugin or Nuxt module handles compilation automatically.

import { compileBlock, compileBlockOrThrow, TailwindBlockError } from 'vue-tailwind-block'
import { transformSfc } from 'vue-tailwind-block/vite'

compileBlock

Compiles the raw YAML string of a <tailwind> block. It returns an object containing either the compiled class tree or an array of problems, without throwing.

check-block.ts
import { compileBlock } from 'vue-tailwind-block'

const result = compileBlock('root:\n  - inline-flex items-center\n  - px-4', { lang: 'yaml' })

if (result.ok) {
  result.classTree.root // 'inline-flex items-center px-4'
} else {
  for (const problem of result.problems) {
    console.error(problem.message)
  }
}
content
string required
The block content between the <tailwind> tags.
options
CompileOptions
Optional configuration, such as { lang: 'yaml' }.

compileBlockOrThrow

Compiles the block content and directly returns the class tree. If the block contains syntax errors or invalid values, it throws a TailwindBlockError.

build-step.ts
import { compileBlockOrThrow } from 'vue-tailwind-block'

const classTree = compileBlockOrThrow('root: rounded-lg border p-6')
// { root: 'rounded-lg border p-6' }

TailwindBlockError

An Error subclass thrown by compileBlockOrThrow. Its problems property contains every error or diagnostic encountered in the block:

build-step.ts
import { compileBlockOrThrow, TailwindBlockError } from 'vue-tailwind-block'

try {
  compileBlockOrThrow('variants:\n  solid:\n')
} catch (error) {
  if (error instanceof TailwindBlockError) {
    console.error(error.problems[0].message)
    // 'Expected a class string, list or group at variants.solid, got null'
  }
}

transformSfc

Exported from vue-tailwind-block/vite. Transforms an entire .vue Single File Component string by replacing the <tailwind> block with an injected variable declaration at the top of <script setup>.

Returns undefined if the file does not contain a <tailwind> block.

custom-plugin.ts
import { transformSfc } from 'vue-tailwind-block/vite'

const transformed = transformSfc(vueSourceCode, { binding: 'classes' })

if (transformed) {
  console.log(transformed.code) // Transformed SFC code
  console.log(transformed.map)  // Source map
}

Types

interface CompileOptions {
  /** The lang attribute of the block ('yaml', 'yml', or undefined). */
  lang?: string
}

type CompileResult =
  | { ok: true, classTree: ClassTree }
  | { ok: false, problems: BlockProblem[] }

interface ClassTree {
  [key: string]: string | ClassTree
}

interface BlockProblem {
  /** Human-readable explanation of the problem. */
  message: string
  /** 0-based start character offset within the block content. */
  start: number
  /** 0-based end character offset within the block content. */
  end: number
}

class TailwindBlockError extends Error {
  readonly problems: BlockProblem[]
}

interface TransformedSfc {
  code: string
  map: SourceMap
}

Linting

Check and fix the classes in a block with your Tailwind ESLint rules.

Copyright © 2026