Editor setup

Tooling to improve the developer experience when working with Sprig CSS.

Syntax support

Sprig CSS uses a lot of custom CSS at-rules like @theme, @variant and @source, and in some editors these can trigger warnings or errors where the rules aren't recognised.

If you're using VS Code, our official Sprig CSS IntelliSense plugin includes a dedicated mode that adds support for all of the custom at-rules and functions.

IntelliSense for VS Code

The official extension enhances the authoring experience with advanced features such as autocomplete, syntax highlighting and linting.

• Autocomplete — intelligent suggestions for utility classes, CSS functions and directives.

• Linting — highlights errors and potential bugs in both your CSS and your markup.

• Hover previews — see the complete CSS for a utility class by hovering over it.

• Syntax highlighting — so that Sprig features that use custom CSS syntax are highlighted correctly.

Class sorting with Prettier

We maintain an official Prettier plugin that automatically sorts your classes following our recommended class order.

npm install -D prettier prettier-plugin-sprigcss

{
  "plugins": ["prettier-plugin-sprigcss"]
}

<!-- Before -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-teal-600 hover:bg-teal-700">Submit</button>

<!-- After -->
<button class="bg-teal-600 px-4 py-2 text-white hover:bg-teal-700 sm:px-8 sm:py-3">Submit</button>