Add TailwindCSS IntelliSense and Prettier Plugin Support for TS/JS Files

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];
}