tailwind-lint 0.9.3 → 0.10.1

package/README.md

@@ -3,7 +3,7 @@
 [![](https://img.shields.io/npm/v/tailwind-lint)](https://www.npmjs.com/package/tailwind-lint) ![](https://github.com/ph1p/tailwind-lint/actions/workflows/ci.yml/badge.svg) ![](https://github.com/ph1p/tailwind-lint/actions/workflows/release.yml/badge.svg)
 
 It just lints your Tailwind project as the IDE will do, just on the command line.
-Supports **Tailwind CSS v4** (CSS-based config) and **v3** (JavaScript config, legacy).
+Supports **Tailwind CSS v4** (CSS config files and Vite projects using `@tailwindcss/vite`) and **v3** (JavaScript config, legacy).
 
 ## Installation
 
@@ -51,6 +51,8 @@ tailwind-lint --verbose
 
 - Finds CSS config files in common locations: `app.css`, `index.css`, `tailwind.css`, `global.css`, etc.
 - Searches in project root and subdirectories: `./`, `./src/`, `./src/styles/`, `./app/`, etc.
+- Detects `vite.config.*` files that use `@tailwindcss/vite`
+- Prefers real CSS configs when present, so custom `@theme` tokens and `@source` directives are available to diagnostics
 - Uses file patterns from `@source` directives if present
 - Falls back to default pattern: `./**/*.{js,jsx,ts,tsx,html,vue,svelte,astro,mdx}`
 - **Note:** When CSS config is in a subdirectory (e.g., `src/styles/global.css`), files are discovered from the project root
@@ -85,6 +87,9 @@ tailwind-lint "**/*.vue" --fix
 # Lint with a specific CSS config (v4)
 tailwind-lint --config ./styles/app.css
 
+# Lint a Vite-based Tailwind v4 project
+tailwind-lint --auto
+
 # Machine-readable output for LLMs/agents
 tailwind-lint --auto --format json
 ```
@@ -129,6 +134,19 @@ Create a CSS config file (`app.css`, `index.css`, or `tailwind.css`):
 
 The CLI auto-detects configs at: `app.css`, `src/app.css`, `index.css`, `src/index.css`, `tailwind.css`, `src/tailwind.css`
 
+You can also use a Vite-based Tailwind v4 project with `@tailwindcss/vite` and no standalone Tailwind CSS config file:
+
+```ts
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	plugins: [tailwindcss()],
+});
+```
+
+If a real CSS config is also present, the CLI uses that file so custom `@theme` tokens and `@source` directives are available to diagnostics.
+
 ### Tailwind CSS v3 (Legacy)
 
 Create a JavaScript config file (`tailwind.config.js`):
@@ -165,6 +183,7 @@ Files are written atomically with multiple iterations to ensure all fixes are ap
 - Recommended Variant Order - Suggests preferred ordering of variants
 - Blocklisted Classes - Detects usage of blocklisted classes
 - Autofix - Automatically fix issues with `--fix` flag
+- Quoted class string extraction - Lints class-like strings in common helper patterns, not only direct `class` and `className` attributes
 
 **v4-Specific:**
 

package/dist/cli.cjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-const require_linter = require("./linter-DTFnITa5.cjs");
+const require_linter = require("./linter-CQy2hg_B.cjs");
 let node_path = require("node:path");
 node_path = require_linter.__toESM(node_path, 1);
 let ansis = require("ansis");

package/dist/{linter-DTFnITa5.cjs → linter-CQy2hg_B.cjs}

@@ -80,8 +80,19 @@ const V4_CSS_FOLDERS = [
 	"./style/",
 	"./styles/",
 	"./assets/css/",
-	"./resources/css/"
+	"./resources/css/",
+	"./.ladle/"
 ];
+const VITE_CONFIG_PATHS = [
+	"vite.config.js",
+	"vite.config.mjs",
+	"vite.config.cjs",
+	"vite.config.ts",
+	"vite.config.mts",
+	"vite.config.cts"
+];
+const SYNTHETIC_VITE_CSS_CONFIG_NAME = ".tailwind-lint.vite.css";
+const SYNTHETIC_VITE_CSS_CONFIG_CONTENT = "@import \"tailwindcss\";";
 const LANGUAGE_MAP = {
 	".astro": "astro",
 	".css": "css",
@@ -109,6 +120,7 @@ const SEVERITY = {
 	WARNING: 2
 };
 const TAILWIND_V4_IMPORT_REGEX = /@import\s+["']tailwindcss(?:["'\s/]|$)/;
+const TAILWIND_VITE_PLUGIN_REGEX = /(?:from\s+["']@tailwindcss\/vite["']|require\(\s*["']@tailwindcss\/vite["']\s*\)|import\(\s*["']@tailwindcss\/vite["']\s*\))/;
 function getLanguageId(filePath) {
 	return LANGUAGE_MAP[filePath.substring(filePath.lastIndexOf(".")).toLowerCase()] || "html";
 }
@@ -238,7 +250,7 @@ function createEditorState(cwd) {
 			] },
 			experimental: {
 				configFile: null,
-				classRegex: []
+				classRegex: ["[\"'`]([^\"'`]*\\b(?:bg|text|border|font|tracking|rounded|px|py|p|m|flex|grid|items|justify|gap|whitespace|overflow|align|leading|uppercase|lowercase|capitalize|shadow|transition|hover:|focus:)[^\"'`]*)[\"'`]"]
 			},
 			lint: {
 				cssConflict: "warning",
@@ -395,7 +407,7 @@ async function loadV4DesignSystem(state, cwd, configPath, verbose = false) {
 			let cssContent;
 			const basePath = node_path.dirname(configPath);
 			if (fileExists(configPath)) cssContent = readFileSync(configPath);
-			else cssContent = "@import \"tailwindcss\";";
+			else cssContent = SYNTHETIC_VITE_CSS_CONFIG_CONTENT;
 			const loadDesignSystem = tailwindcss.__unstable__loadDesignSystem;
 			const designSystem = await loadDesignSystem(cssContent, {
 				base: basePath,
@@ -465,6 +477,9 @@ async function loadV4DesignSystem(state, cwd, configPath, verbose = false) {
 const require$2 = (0, node_module.createRequire)(require("url").pathToFileURL(__filename).href || __filename);
 const CONFIG_DISCOVERY_MAX_DEPTH = 8;
 const isCssConfigFile = (filePath) => filePath.endsWith(".css");
+function syntheticViteCssConfigPath(viteConfigPath) {
+	return node_path.join(node_path.dirname(viteConfigPath), SYNTHETIC_VITE_CSS_CONFIG_NAME);
+}
 async function loadTailwindConfig(configPath) {
 	if (isCssConfigFile(configPath)) return {};
 	if (!node_path.isAbsolute(configPath)) throw new Error(`Config path must be absolute for security reasons: ${configPath}`);
@@ -517,8 +532,32 @@ async function findTailwindConfigPath(cwd, configPath) {
 		if (TAILWIND_V4_IMPORT_REGEX.test(content)) v4Matches.push(candidate);
 	} catch {}
 	if (v4Matches.length > 0) return sortCssCandidates(cwd, v4Matches)[0];
+	const viteConfigPath = await findTailwindViteConfigPath(cwd);
+	if (viteConfigPath) return syntheticViteCssConfigPath(viteConfigPath);
 	return null;
 }
+async function findTailwindViteConfigPath(cwd) {
+	for (const p of VITE_CONFIG_PATHS) {
+		const fullPath = node_path.join(cwd, p);
+		if (isTailwindViteConfig(fullPath)) return fullPath;
+	}
+	const matches = (await (0, tinyglobby.glob)(VITE_CONFIG_PATHS.map((p) => `**/${p}`), {
+		cwd,
+		absolute: true,
+		ignore: DEFAULT_IGNORE_PATTERNS,
+		deep: CONFIG_DISCOVERY_MAX_DEPTH
+	})).filter(isTailwindViteConfig);
+	if (matches.length === 0) return null;
+	return sortByPathDepth(matches)[0];
+}
+function isTailwindViteConfig(filePath) {
+	if (!fileExists(filePath)) return false;
+	try {
+		return TAILWIND_VITE_PLUGIN_REGEX.test(readFileSync(filePath));
+	} catch {
+		return false;
+	}
+}
 function sortByPathDepth(paths) {
 	return [...paths].sort((a, b) => {
 		const depthA = splitDepth(a);
@@ -576,7 +615,7 @@ function resolveTailwindPath(cwd, configDir) {
 }
 async function createState(cwd, configPath, verbose = false) {
 	const resolvedConfigPath = await findTailwindConfigPath(cwd, configPath);
-	if (!resolvedConfigPath) throw new Error("Could not find Tailwind config file. Expected one of:\n  • Tailwind v4 (CSS): app.css, index.css, tailwind.css in project root or src/\n  • Tailwind v3 (JS): tailwind.config.js, tailwind.config.ts\nRun 'npx tailwindcss init' to create a config file.");
+	if (!resolvedConfigPath) throw new Error("Could not find Tailwind config file. Expected one of:\n  • Tailwind v4 (CSS): app.css, index.css, tailwind.css in project root or src/\n  • Tailwind v4 (Vite): vite.config.* with @tailwindcss/vite\n  • Tailwind v3 (JS): tailwind.config.js, tailwind.config.ts\nRun 'npx tailwindcss init' to create a config file.");
 	const isCssConfig = isCssConfigFile(resolvedConfigPath);
 	const tailwindcss = require$1(resolveTailwindPath(cwd, node_path.dirname(resolvedConfigPath)));
 	const version = getTailwindVersion(cwd);
@@ -660,7 +699,7 @@ async function discoverFilesFromConfig(cwd, configPath) {
 		return expandPatterns(cwd, patterns);
 	}
 	const configDir = node_path.dirname(configFilePath);
-	const cssContent = readFileSync(configFilePath);
+	const cssContent = fileExists(configFilePath) ? readFileSync(configFilePath) : SYNTHETIC_VITE_CSS_CONFIG_CONTENT;
 	const { include, exclude } = extractSourcePatterns(cssContent);
 	const importSource = extractImportSourceDirectives(cssContent);
 	const resolveFromConfig = (pattern) => {

package/dist/linter.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_linter = require("./linter-DTFnITa5.cjs");
+const require_linter = require("./linter-CQy2hg_B.cjs");
 exports.extractImportSourceDirectives = require_linter.extractImportSourceDirectives;
 exports.extractSourcePatterns = require_linter.extractSourcePatterns;
 exports.lint = require_linter.lint;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tailwind-lint",
-	"version": "0.9.3",
+	"version": "0.10.1",
 	"description": "A command-line tool that uses the Tailwind CSS IntelliSense plugin to show linting suggestions for your Tailwind CSS classes",
 	"keywords": [
 		"cli",
@@ -61,21 +61,21 @@
 		"@tailwindcss/language-service": "^0.14.29",
 		"ansis": "^4.2.0",
 		"commander": "^14.0.3",
-		"postcss": "^8.5.9",
+		"postcss": "^8.5.10",
 		"tinyglobby": "^0.2.16",
 		"vscode-languageserver-textdocument": "^1.0.12"
 	},
 	"devDependencies": {
 		"@types/node": "^25.6.0",
-		"oxfmt": "^0.45.0",
-		"oxlint": "^1.60.0",
-		"tsdown": "^0.21.8",
-		"typescript": "^6.0.2",
-		"vitest": "^4.1.4"
+		"oxfmt": "^0.46.0",
+		"oxlint": "^1.61.0",
+		"tsdown": "^0.21.10",
+		"typescript": "^6.0.3",
+		"vitest": "^4.1.5"
 	},
 	"engines": {
 		"node": ">=22.0.0",
 		"pnpm": ">=10.0.0"
 	},
-	"packageManager": "pnpm@10.33.0"
+	"packageManager": "pnpm@10.33.2"
 }