November 22, 2022

Code your SolidJS website faster with Stylify CSS

Code your SolidJS website faster with Stylify CSS

Style your SolidJS app quickly and easily without CSS-in-JS using Stylify CSS CSS-like utilities.


Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.

  • ✅ CSS-like selectors
  • ✅ No framework to study
  • ✅ Less time spent in docs
  • ✅ Mangled & Extremely small CSS
  • ✅ No CSS purge needed
  • ✅ Components, Variables, Custom selectors
  • ✅ It can generate multiple CSS bundles

Also we have a page about what problems Stylify CSS solves and why you should give it a try!


Install Stylify using CLI:

npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin

Add the following configuration into vite.config.js:

import { defineConfig } from 'vite';
import { stylifyVite } from '@stylify/unplugin';
import solidPlugin from 'vite-plugin-solid';

const stylifyPlugin = stylifyVite({
	bundles: [{ outputFile: './src/stylify.css', files: ['./src/**/*.jsx'] }],
	// Optional
	compiler: {
		variables: {},
		macros: {},
		components: {},
		// ...

export default defineConfig({
	plugins: [stylifyPlugin, solidPlugin()],
	server: {
		port: 3000,
	build: {
		target: 'esnext',

Add Stylify CSS in src/index.js:

import './stylify.css';


Stylify syntax is similar to CSS. You just write _ instead of a space and ^ instead of a quote.

So if we edit the src/App.jsx:

function App() {
	return (
		<h1 class="font-size:24px margin:12px_24px">
			Hello World!

export default App;

In production, you will get optimized CSS and mangled HTML:

<h1 class="p u">Hello World!</h1>
.p{font-size: 24px}
.u{margin: 12px 24px}

Stackblitz Playground

Go ahead and try Stylify CSS + SolidJS on Stackblitz.


The examples above don’t include everything Stylify can do:

Feel free to check out the docs to learn more 💎.

Give as Feedback!
Do you like Stylify CSS? Let us know by starring our repo!