Getting started
Editor setup
Autocomplete, linting and class sorting for className in your editor.
IntelliSense for VS Code
The official Tailwind CSS IntelliSense extension gives you autocomplete, linting and hover previews. It needs a Tailwind stylesheet to find your project; AstraWind doesn't compile one, so add a small file that only your editor reads:
{
"tailwindCSS.experimental.configFile": "tailwind.css",
"tailwindCSS.classAttributes": ["className", "contentContainerClassName", "columnWrapperClassName"]
}
Add your own className props to classAttributes too, such as the ones you map with classNameProps in styled().
Automatic class sorting with Prettier
prettier-plugin-tailwindcss sorts classes in Tailwind's recommended order. It works with AstraWind as it is, since AstraWind resolves classes the same way regardless of their order:
npm install -D prettier prettier-plugin-tailwindcss
{
"plugins": ["prettier-plugin-tailwindcss"],
"tailwindStylesheet": "./tailwind.css"
}