Getting started

Get started with Sprig CSS

Sprig CSS works by scanning all of your HTML files, JavaScript components and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

It's fast, flexible and reliable — with zero runtime.

Installation

Using Vite
Using PostCSS
Sprig CLI
Play CDN

Installing Sprig CSS as a Vite plugin is the most seamless way to integrate it with frameworks like SvelteKit, React Router, Nuxt and SolidJS.

Create your project
Start by creating a new Vite project if you don't have one set up already. The most common approach is to use Create Vite.
Terminal
```
npm create vite@latest my-project
cd my-project
```
Install Sprig CSS
Install sprigcss and @sprigcss/vite via npm.
Terminal
```
npm install sprigcss @sprigcss/vite
```

Configure the Vite plugin

Add the @sprigcss/vite plugin to your Vite configuration.

vite.config.ts

import { defineConfig } from 'vite'import sprig from '@sprigcss/vite'export default defineConfig({  plugins: [    sprig(),  ],})

Import Sprig CSS
Add an @import to your CSS file that imports Sprig CSS.
CSS
```
@import "sprigcss";
```
Start your build process
Run your build process with npm run dev or whatever command is configured in your package.json file.
Terminal
```
npm run dev
```

Start using Sprig in your HTML

Make sure your compiled CSS is included in the <head>, then start using Sprig's utility classes to style your content.

HTML

<!doctype html><html><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link href="/src/style.css" rel="stylesheet"></head><body>  <h1 class="text-3xl font-bold underline">    Hello world!  </h1></body></html>

Installing Sprig CSS as a PostCSS plugin is the most seamless way to integrate it with frameworks like Next.js and Angular.

Terminal

npm install sprigcss @sprigcss/postcss postcss

postcss.config.mjs

export default {
  plugins: {
    "@sprigcss/postcss": {},
  },
}

The simplest and fastest way to get up and running with Sprig CSS from scratch is with the Sprig CLI tool.

Terminal

npx @sprigcss/cli -i ./src/input.css -o ./src/output.css --watch

Use the Play CDN to try Sprig right in the browser without any build step. The Play CDN is designed for development purposes only.

index.html

<script src="https://cdn.sprigcss.dev/play@1"></script>

Are you stuck?

Setting up Sprig with Vite can be a bit different across build tools. Check our framework guides to see if we have more specific instructions for your setup.

Get started with Sprig CSS

Sprig CSS works by scanning all of your HTML files, JavaScript components and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

It's fast, flexible and reliable — with zero runtime.

Installation

Using Vite
Using PostCSS
Sprig CLI
Play CDN

Installing Sprig CSS as a Vite plugin is the most seamless way to integrate it with frameworks like SvelteKit, React Router, Nuxt and SolidJS.

Create your project
Start by creating a new Vite project if you don't have one set up already. The most common approach is to use Create Vite.
Terminal
```
npm create vite@latest my-project
cd my-project
```
Install Sprig CSS
Install sprigcss and @sprigcss/vite via npm.
Terminal
```
npm install sprigcss @sprigcss/vite
```

Configure the Vite plugin

Add the @sprigcss/vite plugin to your Vite configuration.

vite.config.ts

import { defineConfig } from 'vite'import sprig from '@sprigcss/vite'export default defineConfig({  plugins: [    sprig(),  ],})

Import Sprig CSS
Add an @import to your CSS file that imports Sprig CSS.
CSS
```
@import "sprigcss";
```
Start your build process
Run your build process with npm run dev or whatever command is configured in your package.json file.
Terminal
```
npm run dev
```

Start using Sprig in your HTML

Make sure your compiled CSS is included in the <head>, then start using Sprig's utility classes to style your content.

HTML

<!doctype html><html><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link href="/src/style.css" rel="stylesheet"></head><body>  <h1 class="text-3xl font-bold underline">    Hello world!  </h1></body></html>

Installing Sprig CSS as a PostCSS plugin is the most seamless way to integrate it with frameworks like Next.js and Angular.

Terminal

npm install sprigcss @sprigcss/postcss postcss

postcss.config.mjs

export default {
  plugins: {
    "@sprigcss/postcss": {},
  },
}

The simplest and fastest way to get up and running with Sprig CSS from scratch is with the Sprig CLI tool.

Terminal

npx @sprigcss/cli -i ./src/input.css -o ./src/output.css --watch

Use the Play CDN to try Sprig right in the browser without any build step. The Play CDN is designed for development purposes only.

index.html

<script src="https://cdn.sprigcss.dev/play@1"></script>

Are you stuck?

Setting up Sprig with Vite can be a bit different across build tools. Check our framework guides to see if we have more specific instructions for your setup.