This content originally appeared on DEV Community and was authored by Ahmed Zougari
When you're working with TailwindCSS, sometimes you need to write class strings in non-TSX files, like exporting variants when using cva (class-variance-authority.
The problem is that you get neither Tailwind IntelliSense nor class sorting from the Prettier Tailwind plugin.
What is the cn utility?
If you're familiar with shadcn, you already know it; if not, the snippet below explains it.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Add TailwindCSS Intellisense to typescript files
VSCode: In your settings.json, add this line (you can include any name for your functions).
{
"tailwindCSS.classFunctions": ["cva", "cn"]
}
NeoVim: Make sure you have nvim-lspconfig installed
require 'lspconfig'.tailwindcss.setup({
settings = {
tailwindCSS = {
classFunctions = { "cva", "cn" },
},
},
})
Prettier TailwindCSS Plugin Support
Simply add this to your existing Prettier config file
{
"plugins": [
"prettier-plugin-tailwindcss"
],
"tailwindFunctions": ["cva", "cn"]
}
Bonus: Show the added utilities with the IntelliSense suggestions
If you're creating utilities in your CSS file, and they aren't showing with IntelliSense, instead of doing it like this:
@layer utilities {
.bg-gradient {
background: linear-gradient(180deg, #f5f5ff 73%, #e0e0ff 100%);
}
.txt-preset-1 {
@apply text-[52px] font-bold leading-[140%] tracking-[-2px];
}
.txt-preset-1-mobile {
@apply text-[46px] font-bold leading-[120%] tracking-[-2px];
}
.txt-preset-2 {
@apply text-[40px] font-bold leading-[120%] tracking-[-0.3px];
}
}
Do this; it not only shows in IntelliSense but also works with variants like hover, focus, and lg:.
@utility bg-gradient {
background: linear-gradient(180deg, #f5f5ff 73%, #e0e0ff 100%);
}
@utility txt-preset-1 {
@apply text-[52px] font-bold leading-[140%] tracking-[-2px];
}
@utility txt-preset-1-mobile {
@apply text-[46px] font-bold leading-[120%] tracking-[-2px];
}
This content originally appeared on DEV Community and was authored by Ahmed Zougari
Ahmed Zougari | Sciencx (2025-08-31T22:05:09+00:00) Add TailwindCSS IntelliSense and Prettier Plugin Support for TS/JS Files. Retrieved from https://www.scien.cx/2025/08/31/add-tailwindcss-intellisense-and-prettier-plugin-support-for-ts-js-files/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.