Empieza a usar Stylify CSS con tu herramienta favorita en un minuto

Migra desde otros frameworks CSS y librerías CSS-in-JS a Stylify fácilmente

Componentes sin cabeza preparados

Copiar&Pegar, componentes sin estilo inspirados en el Material Design V3.

Curva de aprendizaje cero y codificación más rápida

En lugar de escribir CSS y cambiar entre archivos HTML y CSS utiliza selectores similares a CSS. La sintaxis es similar a CSS. Utilice _ en lugar de espacio y ^ para las comillas.

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

Optimización CSS y HTML automática y extremadamente afinada

CSS es generado dinámicamente en archivos CSS, es optimizado y HTML es manipulado. No se genera CSS no utilizado. No es necesario purgar CSS. No es necesario crear archivos CSS. Gracias al algoritmo interno para unir selectores, casi no se generan duplicados.

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

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

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

División de paquetes CSS simples

Los paquetes CSS se pueden dividir en varios archivos. Es más eficiente que combinar CSS manualmente y también hace que la salida CSS sea más pequeña.

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' }

Configuración intuitiva

Define variables, componentes y selectores personalizados para simplificar el desarrollo. Los valores de las variables pueden ser diferentes para cada pantalla. Esto te permite cambiarlo para modo oscuro/modo claro y escritorio/móvil.

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)}

Configura Variables, Componentes y Selectores Globales en archivos, donde se utilizan

Componentes, Variables y Selectores Globales pueden ser definidos dentro de un archivo, donde son usados. Esto encapsula los componentes CSS y HTML en un archivo

	blue: '#01befe'

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

Extender funcionalidad con ganchos

Los ganchos se pueden utilizar para extender la funcionalidad y modificar la salida durante la compilación. Hay ganchos para Compilador, Bundler y en navegador para 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')) {

	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`;

Hablaron de 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
It's similar to the Tailwind but more readable.
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.
I'm notoriously bad with CSS, giving this a try 👾.
Miles Pernicious
Looks pretty cool so far 🤩.
Mubashar HashmatManager at Scorp
Extremely awesome 😎.
Awesome, I'll try it later.
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.
Seems cool ✌️✌️✌️
Very cool library!
sam i am
That's nice!
Musa Yazlık
Hmm. I like it. 😁
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
RyuseFrontend developer
Thiago TelesFullstack developer at Scriptcase
OcultarMostrar más comentarios


No estudies frameworks. Céntrate en programar

Como desarrollador, quieres codificar tu sitio web de forma fácil, rápida y sin pasar demasiado tiempo en docs. Los frameworks, las librerías CSS-in-JS, y los preprocesadores tienen muchas grandes características, pero también hacen el desarrollo más complejo, forzándote a estudiar sintaxis, selectores con nombres aleatorios, y cómo usar diferentes características (que puedes olvidar después de una semana de vacaciones 🍹).

Stylify se centra en la simplicidad y utiliza selectores similares a CSS que ya conoces. Es como escribir CSS puro directamente en el marcado sin necesidad de cambiar entre archivos y averiguar los nombres de los selectores. Si sabes CSS, sabes cómo usar Stylify. Probando Stylify, descubrirás que los preprocesadores y los selectores cortos son innecesarios.

Vladimír Macháček
Autor de Stylify CSS
Desarrollador web en Slevomat.cz

Guía de integración de Material Theme Builder

Últimas entradas del blog

¡Adelante! Inténtalo.

Pruébalo ahora en el navegador o en los playgrounds preparados de Stack Blitz para Vue, React, Next.js, Nuxt.js, Lit, Svelte y otras herramientas.