StylifyCSS.com - Write CSS faster

Write CSS Faster

Stylify uses CSS-like selectors color:blue, width:640px, margin:0_auto along with variables, components, custom selectors to generate optimized CSS dynamically based on what you write.

Zero Learning Curve. Don't waste time studying CSS framework
Less switching between HTML/CSS files
Automagic and Extremely Tunned CSS Optimization
Simple CSS Bundles Splitting for Layouts/Pages
Easily Configurable and Extensible
Seamless Installation
Migration guides from other frameworks and libraries
Prepared, Copy&Paste, Headless Components

Get Started Installation

400 ⭐

Selectors
Components
Global Selectors
Variables
Screens
Functions

Editor Dev CSS Production CSS Production HTML

<!--
Edit Me 😎!
Write selectors as CSS property:value
Use _ for a space and ^ for a quote
-->
<img src="/images/p1.jpg" class="
		height:120px
		width:auto
		border-radius:4px
		transition:.3s
		hover:scale:1.1
">


<!--
Edit Me 😎!
Write selectors as CSS property:value
Use _ for a space and ^ for a quote
-->
<img src="/images/p1.jpg" class="
		height:120px
		width:auto
		border-radius:4px
		transition:.3s
		hover:scale:1.1
">


.border-radius\:4px{
	border-radius: 4px
}
.height\:120px{
	height: 120px
}
.hover\:scale\:1\.1:hover{
	scale: 1.1
}
.transition\:\.3s{
	transition: .3s
}
.width\:auto{
	width: auto
}


.z{
	border-radius: 4px
}
.zp{
	height: 120px
}
.zo:hover{
	scale: 1.1
}
.dr{
	transition: .3s
}
.cw{
	width: auto
}


<!--
Edit Me 😎!
Write selectors as CSS property:value
Use _ for a space and ^ for a quote
-->
<img src="/images/p1.jpg" class="
		zp
		cw
		z
		dr
		zo
">

Editor Dev CSS Production CSS Production HTML

<!--
stylify-components
	'image': `
		height:100px
		width:auto
		border-radius:4px
		transition:.3s
		margin:0_8px
		hover:scale:1.1
	`
/stylify-components
-->
<img src="/images/p1.jpg" class="image">
<img src="/images/p2.jpg" class="image">


<!--
stylify-components
	'image': `
		height:100px
		width:auto
		border-radius:4px
		transition:.3s
		margin:0_8px
		hover:scale:1.1
	`
/stylify-components
-->
<img src="/images/p1.jpg" class="image">
<img src="/images/p2.jpg" class="image">


.image{
	border-radius: 4px
}
.image{
	height: 100px
}
.image{
	margin: 0 8px
}
.image:hover{
	scale: 1.1
}
.image{
	transition: .3s
}
.image{
	width: auto
}


.zq{
	border-radius: 4px
}
.zq{
	height: 100px
}
.zq{
	margin: 0 8px
}
.zq:hover{
	scale: 1.1
}
.zq{
	transition: .3s
}
.zq{
	width: auto
}


<!--
stylify-components
	'image': `
		height:100px
		width:auto
		border-radius:4px
		transition:.3s
		margin:0_8px
		hover:scale:1.1
	`
/stylify-components
-->
<img src="/images/p1.jpg" class="zq">
<img src="/images/p2.jpg" class="zq">

Editor Dev CSS Production CSS Production HTML

<!--
stylify-customSelectors
	img: `
		height:100px
		width:auto
		border-radius:4px
		transition:.3s
		hover:scale:1.1
	`
/stylify-customSelectors
-->
<img src="/images/p3.jpg" class="[&+img]{margin-left:8px}">
<img src="/images/p4.jpg">


<!--
stylify-customSelectors
	img: `
		height:100px
		width:auto
		border-radius:4px
		transition:.3s
		hover:scale:1.1
	`
/stylify-customSelectors
-->
<img src="/images/p3.jpg" class="[&+img]{margin-left:8px}">
<img src="/images/p4.jpg">


img{
	border-radius: 4px
}
img{
	height: 100px
}
.\[\&\+img\]\{margin-left\:8px\}+img{
	margin-left: 8px
}
img:hover{
	scale: 1.1
}
img{
	transition: .3s
}
img{
	width: auto
}


img{
	border-radius: 4px
}
img{
	height: 100px
}
.zs+img{
	margin-left: 8px
}
img:hover{
	scale: 1.1
}
img{
	transition: .3s
}
img{
	width: auto
}


<!--
stylify-customSelectors
	img: `
		height:100px
		width:auto
		border-radius:4px
		transition:.3s
		hover:scale:1.1
	`
/stylify-customSelectors
-->
<img src="/images/p3.jpg" class="zs">
<img src="/images/p4.jpg">

Editor Dev CSS Production CSS Production HTML

<!--
stylify-variables
	height: '120px',
	radius: '4px',
	scale: '1.1'
/stylify-variables
-->
<img src="/images/p3.jpg" class="
	width:auto
	transition:.3s
	height:$height
	border-radius:$radius
	hover:scale:$scale
">


<!--
stylify-variables
	height: '120px',
	radius: '4px',
	scale: '1.1'
/stylify-variables
-->
<img src="/images/p3.jpg" class="
	width:auto
	transition:.3s
	height:$height
	border-radius:$radius
	hover:scale:$scale
">


:root {
	--height: 120px;
	--radius: 4px;
	--scale: 1.1;
}
.border-radius\:\$radius{
	border-radius: var(--radius)
}
.height\:\$height{
	height: var(--height)
}
.hover\:scale\:\$scale:hover{
	scale: var(--scale)
}
.transition\:\.3s{
	transition: .3s
}
.width\:auto{
	width: auto
}


:root {
	--height: 120px;
	--radius: 4px;
	--scale: 1.1;
}
.zv{
	border-radius: var(--radius)
}
.zu{
	height: var(--height)
}
.zt:hover{
	scale: var(--scale)
}
.dr{
	transition: .3s
}
.cw{
	width: auto
}


<!--
stylify-variables
	height: '120px',
	radius: '4px',
	scale: '1.1'
/stylify-variables
-->
<img src="/images/p3.jpg" class="
	cw
	dr
	zu
	zv
	zt
">

Editor Dev CSS Production CSS Production HTML

<!--
	Screens can be static: sm, lg, md
	Dynamic: miw640px, rng400px-800px
	Combined using logical operands
	- lg&&landscape
	- sm||lg
-->

<img src="/images/p2.jpg" width="120" height="120" class="
	object-fit:cover

	border-radius:4px
	sm:border-radius:12px
	minw600px:border-radius:24px
	lg||landscape:border-radius:120px
">


<!--
	Screens can be static: sm, lg, md
	Dynamic: miw640px, rng400px-800px
	Combined using logical operands
	- lg&&landscape
	- sm||lg
-->

<img src="/images/p2.jpg" width="120" height="120" class="
	object-fit:cover

	border-radius:4px
	sm:border-radius:12px
	minw600px:border-radius:24px
	lg||landscape:border-radius:120px
">


.border-radius\:4px{
	border-radius: 4px
}
.object-fit\:cover{
	object-fit: cover
}

@media (min-width: 600px) {
.minw600px\:border-radius\:24px{
	border-radius: 24px
}
}

@media (min-width: 640px) {
.sm\:border-radius\:12px{
	border-radius: 12px
}
}

@media (min-width: 1024px), (orientation: landscape) {
.lg\|\|landscape\:border-radius\:120px{
	border-radius: 120px
}
}


.z{
	border-radius: 4px
}
.ch{
	object-fit: cover
}

@media (min-width: 600px) {
.zx{
	border-radius: 24px
}
}

@media (min-width: 640px) {
.zw{
	border-radius: 12px
}
}

@media (min-width: 1024px), (orientation: landscape) {
.zy{
	border-radius: 120px
}
}


<!--
	Screens can be static: sm, lg, md
	Dynamic: miw640px, rng400px-800px
	Combined using logical operands
	- lg&&landscape
	- sm||lg
-->

<img src="/images/p2.jpg" width="120" height="120" class="
	ch

	z
	zw
	zx
	zy
">

/*
https://stylifycss.com/en/docs/stylify/compiler#helpers

Helpers can be used within selectors or macros.
For example color:lighten(#000,10) is helper
for lightening color.

You can define your own easily within helpers option.
*/
new Compiler({
	helpers: {
		textPropertyType(value) {
			if (value === 'bold') {
				return 'font-weight';
			} else if (value === 'italic') {
				return 'font-style'
			} else if (value.includes('$')) {
				return 'color';
			}
		},
	},
	macros: {
		'text:(\\S+)'(match) {
			const property = this.helpers.textPropertyType(
				match.getCapture(0)
			);

			return {[property]: match.getCapture(0)}
		}
	}
});

NoLimit Wehosting for $2/month.
Code WN241PJLO2

Start using Stylify CSS with your favorite tool in a minute

Check out integrations

Migrate from other CSS frameworks and CSS-in-JS libraries to Stylify easily

Learn more

Prepared Headless Components

Copy&Paste, unstyled components inspired by the Material Design V3.

Zero Learning Curve and Faster Coding

Instead of writing CSS and switching between HTML and CSS files use CSS-like selectors. The syntax is similar to CSS. Use _ instead of space and ^ for a quote.

<h1 class="font-size:24px color:blue hover:color:lightblue lg:font-size:32px">
	Hello World!🎉
</h1>

Automatic and Extremely Tuned CSS and HTML Optimization

CSS is dynamically generated into CSS files, it is optimized and HTML is mangled. No unused CSS is generated. No CSS purge is needed. No CSS files have to be created. Thanks to inner algorithm for joining selectors, almost no duplicates are generated.

<!-- Production HTML -->
<h1 class="a b c d">
	Hello World!🎉
</h1>

/* Production CSS */
.a {font-size:24px}
.b {color:blue}
.c:hover {color:lightblue}

@media (min-width: 1024px) {
  .d{ font-size: 32px }
}

Simple CSS Bundles Splitting

CSS bundles can be split into multiple files. It's more efficient than combining CSS manually and it also makes the CSS output smaller.

const bundles = [
	// Use Glob syntax to map files
	{ files: [ 'templates/**/*.html' ], outputFile: 'global.css },
	// Split CSS for layouts
	{ files: [ 'layout.html' ], outputFile: 'layout.css' },
	// And for pages
	{ files: [ 'index.html' ], outputFile: 'index.css' }
];

Intuitive Configuration

Define reusable variables, components and custom selectors to simplify the development. Variables values can be different for each screen. This allows you to change it for dark mode/light mode and desktop/mobile.

const config = {
	variables: {
		primary: '#01befe',
		titleFontSize: '24px',
		// Variables based on color scheme dark/light
		dark: {
			primary: '#fff'
		},
		// Variables based on screen size
		'minw640px': {
			titleFontSize: 38px
		}
	},
	components: {
		'section': 'max-width:1240px margin:0_auto_24px_auto',
		// Dynamic components
		'title(?:--(\\S+))?': ({ matches, variables, helpers, dev }) => {
			const color = matches[1] ?? '#000';
			return `font-size:24px${color ? ` color:${color}` : ''}`;
		},
	},
	customSelectors: {
		'*': 'box-sizing:border-box',
		'h1,h2': 'margin-top:0 margin-bottom:12px md:margin-bottom:24px'
	},
	macros: {
		'ml:(\S+?)': (match) => {
			// ml:24px => will create => margin-left: 24px
			return {'margin-left': match.getCapture(0)}
		}
	},
}

Configure Variables, Components and Global Selectors in files, where they are used

Components, Variables and Global Selectors can be defined within a file, where they are used. This encapsulates component CSS and HTML into one file.

<!--
stylify-variables
	blue: '#01befe'
/stylify-variables

stylify-components
	subtitle: 'font-size:24px margin-bottom:12px color:$blue'
/stylify-components
-->
<h2 class="subtitle">Subtitle 1</h2>
<h2 class="subtitle">Subtitle 2</h2>

Extend Functionality with Hooks

Hooks can be used extend functionality and modify the output during compilation. There are hooks for Compiler, Bundler and in browser for Runtime.

// This hook example converts px font size
// to REM and automatically calculates line height.
import {hooks} from '@stylify/stylify';

hooks.addListener('compiler:newMacroMatch', ({selectorProperties}) => {
	const pixelUnit = selectorProperties['font-size'];

	if (typeof pixelUnit === 'undefined' || !pixelUnit.endsWith('px')) {
		return;
	}

	const pixelFontSize = Number(pixelUnit.slice(0,-2));
	const remFontSize = pixelFontSize / 10;

	selectorProperties['font-size'] = `${remFontSize}rem`;
	selectorProperties['line-height'] = `${remFontSize * (pixelFontSize >= 28 ? 1.2 : 1.7)}rem`;
});

Get Started

They talked about Stylify CSS

LukeshiruWebdev at Vangware

It's like Tailwind's JIT, but without having to learn new classnames, and following a really simple set of "rules". Great library!

Yoav GanbarEngineer at Builder.io and QwikDev

Write plain CSS just in a class?
Fair enough, I'm intrigued.

蝉丸ファンCore committer of @webpack

Phan An@vuejs core team member

This looks super interesting!

One of the Top Front-End Tools Of 2022By Louis Lazaris

One of the Top Development Languages on Product Hunt

Mentioned in TLDR.tech newsletter

Mentioned in Codrops newsletter

Mentioned in This Week In React newsletterBy Sébastien Lorber

Mentioned by Remix.run maintainer as a tool for generating CSS for RemixBy Chance Strickland

Mentioned in Web Tools Weekly as one of the Top 30 Tools of 2022

One of the Best Tailwind CSS Alternatives for 2023

Mentioned as one of the Top 7 Web dev tools that will make your life EASYBy Pritesh Kiri

Mentioned in Svelte newsletterBy Dani Sandoval

Mentioned in Symfony newsletterBy Javier Eguiluz

Mentioned in Jamstacked newsletterBy Brian Rinaldi

Mentioned in Feature NewsletterBy Gabriel Nunes

Mentioned in JSter newsletter as a tool for Writing CSS

Jorge Baumann.jsFull Stack Developer at One Beyond

[🔧] Do you know Stylify? It's an alternative to Tailwind #CSS that goes one step further. 🔤 Known syntax 📈 No learning curve 👩‍💻 Write normal CSS in classes ⚛️ Supports variables and components 🗜️ Works with Webpack, Rollup or Vite

Tomáš PilařCo-Founder & CTO Conviu.com

I recommend looking at stylifycss.com if you don't know that tool yet 👍. Launched on the first try with Symfony and it works like a charm! 👏

Posandu MapaFullstack dev

I like how Stylify compresses the utility classes. A good Tailwind CSS alternative.

Tom RavnWebdeveloper & SysAdmin

Have you heard about Stylify? Similar framework as #TailwindCSS. I guess when you finally learn #CSS using Tailwind you can go level deeper and use Stylify, you will basically write pure CSS into #html.😆

Reegan RajasekarFull Stack Web Developer

I just thought it's just another css library like tailwind. But Twitter recommend this every time. So i just checked what is this . But now I feel it's awesome. bcz it gives utility classes like tailwind but it uses css like class names . I gonna use this in my next projects.

Finn GuhaWebdev teacher

Wow, that seems like a promising concept! And one that seems very interesting to me personally. I am always amazed by new and unique concepts of writing CSS.

David Mario LiclaFront-End dev at Forma

🤯 Did you know that there is an alternative to TailwindCSS but only using CSS properties? Look it's called Stylify!

Toheeb OgunbiyiWeb-UI Engineer

Utility on steroids, I love this! No weird utility names, almost same as CSS. Chars as class names on production. Colocation of states within the rule makes a lot of sense too. This makes up for readability compared to others.

RinFull-Stack Developer

Immediately interested when I read features on documentation, give a shot with Astro and absolutely love it.

Michael AndreuzzaUI Designer & Front end dev

I like that mangling feature. I was using a library that uglifies the code exactly like that..very useful for some cases.

Oscar Lito M Pablo

We now can easily integrate/use in @stylifycss by @8machy any Material Design 3 ("Material You") @materialdesign themes generated using the new Material Theme Builder! Saves a lot of time!

David TerenTech Lead & Ruby and Rails Dev

It's one of the tools that enables me to create entirely reactive web, iOS and Android apps with little JS.

Reza QorbaniCTO & Co-Founder at QualiaID

I didn’t know about Stylify! Looks amazing! I love feathers such as minify Class Names which is missing from Tailwind 👍.

Arif UddinSoftware Developer at BitCode

Wish I know this library before. I can save my 1-month of work in our company, we did the mangling optimization for our product.

Japheth Mutai

Well, I guess we all need to follow @stylifycss to reduce our #CSS related nerve attacks 😂😂.

Muhi MasriFrontend Engineer

Just came across #stylifycss, which uses CSS-like selectors to generate optimized utility-first CSS dynamically. Excited to try it out!

Yousuf IqbalFull Stack Developer

This is awesome. Almost zero learning curve 👍!

Ahmad AlfyEngineering @robustastudio

It gives more freedom than the strictly confined design system in Tailwind.

Ahmad TahirFullstack Dev

Wow this looks neat 💯. I'll be checking it out.

Código de MarrasFrontend Developer

It's interesting, an alternative to having everything in a single file...

Ahmed ZougariReact developer

StylifyCSS is like Tailwind framework but easier to learn and read.

Jean-BaptisteCreator of Ardaria

Interesting project! Keep going guyz 💪

Darryl Yeo

This make so much more sense than Tailwind.

Ngmi

I'm notoriously bad with CSS, giving this a try 👾.

Miles Pernicious

Looks pretty cool so far 🤩.

Mubashar HashmatManager at Scorp

Extremely awesome 😎.

Xavi

Awesome, I'll try it later.

Lucas

Good job. I’ll give it a try !

Shushant LakhyaniJust Ship It Hub

This looks cool!

SibasishWeb Developer

@stylifycss = @tailwindcss - all the goodness of utility classes.

Mukesh

Paul⭐Bear

sam i am

Musa Yazlık

Eze ChukwuemekaTech Support

I love this

Mugiwara Superfly

Wow wow wow

Rajesh KhadkaTech Lead & Ruby and Rails Dev

May be next tailwind css. 🙃

G-WokWeb3 Developer

Looks cool

Alfred ChadáChief Technical Officer

Nice work

Ricardo AnayaFull Stack Developer

Cool!

RyuseFrontend developer

Interesting

Thiago TelesFullstack developer at Scriptcase

Nice

HideShow More Shoutouts

Showcase

FitVisio.com - A simple fitness, health and wellness tracking app.

Tech Stack:

TravellingVisio.com - A travelling blog.

Tech Stack:

Prace.dev - A job portal for programmers.

Tech Stack:

Check out other projects

Don't study frameworks. Focus on coding!

As a developer, you want to code your website easily, quickly, and without spending too much time in docs. Frameworks, CSS-in-JS libraries, and preprocessors have many great features, but they also make development more complex, forcing you to study syntax, randomly named selectors, and how to use different features (which you may forget after a week of holiday 🍹).

Stylify focuses on simplicity and uses CSS-like selectors that you already know. It's like writing pure CSS directly into the markup without the need to switch between files and figure out the names for selectors. If you know CSS, you know how to use Stylify. By trying Stylify, you will find that preprocessors and short selectors are unnecessary.

Vladimír Macháček
Author of Stylify CSS
Webdev at Slevomat.cz

Go ahead and try Stylify

Material Theme Builder Integration Guide

Check out Material Theme Guide

Latest Blog Posts

February 24, 2023

Faster React apps coding: How to migrate from Emotion CSS-in-JS to Stylify Utility-First CSS.

Want to style your React Application faster? Learn how to easily migrate from Emotion CSS-in-JS to Stylify utility-first CSS for better React development.

February 16, 2023

How to Effortlessly Migrate from Styled Components CSS-in-JS to Stylify Utility-First CSS for Better React Development.

Learn how to easily migrate to Stylify CSS for better React development.

February 2, 2023

Best practices for utility-first CSS

Learn how to use Utility-First CSS effectively to style your website while avoiding bloated templates and maintenance difficulties.

Check out more articles

Go ahead. Give it a try!

Try it now in the browser or at prepared Stack Blitz playgrounds for Vue, React, Next.js, Nuxt.js, Lit, Svelte and a other tools.

Get Started

StylifyCSS.com - Write CSS faster

Write CSS Faster

Start using Stylify CSS with your favorite tool in a minute

Migrate from other CSS frameworks and CSS-in-JS libraries to Stylify easily

Prepared Headless Components

Buttons

Mobile navigation

Switches

Text Fields

Paginations

Articles List - Type 1

Dialogs

Messages

Forms

Zero Learning Curve and Faster Coding

Automatic and Extremely Tuned CSS and HTML Optimization

Simple CSS Bundles Splitting

Intuitive Configuration

Configure Variables, Components and Global Selectors in files, where they are used

Extend Functionality with Hooks

They talked about Stylify CSS

Showcase

Don't study frameworks. Focus on coding!

Material Theme Builder Integration Guide

Latest Blog Posts

Faster React apps coding: How to migrate from Emotion CSS-in-JS to Stylify Utility-First CSS.

How to Effortlessly Migrate from Styled Components CSS-in-JS to Stylify Utility-First CSS for Better React Development.

Best practices for utility-first CSS

Go ahead. Give it a try!