KnitCSS CSS in your templates
CSS, still CSS.

Style in
place.

Write CSS directly in your templates. Keep styles beside the element they belong to, without learning a substitute language.

Install → Read docs
template 
<button class="!{color:red} !:hover{color:green}">
 Button
</button>
CSS syntax Template local CLI build
01 / Familiar
Normal CSS syntax.
02 / Local
Styles next to markup.
03 / Composable
Directives when useful.
01 / Install

Get knitting
in one command.

Install the CLI globally on Linux, macOS or Windows, or add KnitCSS directly to the NPM project you are already in.

CLI

Install globally.

Files Checksums
Linux / macOS Bash
Terminal 
curl -fsSL https://knitcss.com/install | bash
Windows PowerShell
Terminal 
powershell -c "irm knitcss.com/install|iex"
NPM

Already in
a project?

Run this from the current npm project and install KnitCSS there with all batteries included.
It works out of the box with no additional configuration required for Vite and Next/Nuxt projects.

Terminal 
npm install https://knitcss.com/install
02 / The premise

Less switching.
More making.

!

Declare

A Knit declaration begins with !. Inside the braces, write the CSS properties you already know.

:hover

Select

Pseudo-classes sit naturally after the Knit marker, while direct declarations keep styles attached to the element they affect.

at(medium)

Respond

Use the recommended !at(...) directive for consistent project breakpoints.

copy()

Reuse

Name declarations with id, then copy and override them where repetition would otherwise creep in.

03 / Quick start

From zero
to knitting.

Initialize a project, add a template, then compile once or keep Knit watching while you work.

Read the docs →
  1. 01
    Initializeknitcss --init
  2. 02
    Write<div class="!{display:grid}">
  3. 03
    Compileknitcss --watch
04 / Syntax

Small surface.
Real CSS.

Knit adds a thin layer for locating declarations in templates. Selectors, properties, at-rules and nesting stay recognizably CSS.

!{property:value}

Base declaration

!:hover{opacity:.8}

Selector

!at(medium){display:grid}

Recommended breakpoint

!copy(card){background:white}

Reusable declaration

Documentation / Complete guide Learn the whole
language. →