Linaria

Try it in 3 steps

1. 1

   Install Linaria 8.2.0 with the Vite integration

   On Node.js 22.12.0 or later, pin Linaria core together with the matching WyW/Vite integration line.

   demo=$(mktemp -d "${TMPDIR:-/tmp}/linaria.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact @linaria/core@8.2.0 @wyw-in-js/vite@2.4.0 vite@6.4.3Copy
2. 2

   Create a css-tag source file and Vite config

   Create the smallest setup where the WyW Vite plugin can process an @linaria/core css tag at build time.

   mkdir -p src && printf "%s\n" "import { defineConfig } from 'vite';" "import linaria from '@wyw-in-js/vite';" "export default defineConfig({ plugins: [linaria()] });" > vite.config.mjs && printf "%s\n" '<!doctype html><div id="app"></div><script type="module" src="/src/main.js"></script>' > index.html && printf "%s\n" "import { css } from '@linaria/core';" "const title = css`color: rebeccapurple; font-weight: 700;`;" "document.querySelector('#app').innerHTML = '<h1 class="' + title + '">Linaria</h1>';" > src/main.jsCopy
3. 3

   Build with Vite and verify static CSS extraction

   Confirm the production build emits a CSS asset instead of relying on a runtime styling engine.

   npx vite build && test -n "$(find dist -name '*.css' -type f -print -quit)"Copy

Built with

• TypeScript
• React

Categories and tags

GitHub data

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Explore next

• PostCSS28,974 Stars

  4 shared tag(s) · 1 shared category(s) · Same language

  parse CSS into an AST and compose build-time style processing with JavaScript plugins

  TypeScript
• React Spectrum15,913 Stars

  4 shared tag(s) · 1 shared category(s) · Same language

  build accessible React interfaces with styled Spectrum components or unstyled React Aria primitives

  TypeScript
• PurgeCSS8,050 Stars

  4 shared tag(s) · 1 shared category(s) · Same language

  scan content files and keep only selectors that are actually referenced

  TypeScript
• Bootstrap174,991 Stars

  3 shared tag(s) · 2 shared category(s)

  Build responsive interfaces from a CSS/Sass grid, utilities, components, and native JavaScript

  MDX
• Tailwind CSS97,773 Stars

  3 shared tag(s) · 1 shared category(s) · Same language

  Compose utility classes in HTML and components and generate the required CSS at build time

  TypeScript
• Docusaurus66,399 Stars

  3 shared tag(s) · 1 shared category(s) · Same language

  combine docs, blogs, custom React pages, and localization into a static documentation-site build

  TypeScript