How to migrate from Tailwind Utility-First CSS framework to Stylify CSS

Shortcuts:Introduction Selectors and CSS Utilities Global Selectors Components Configuration, Customization and Variables

This guide is here to help you quickly compare the features and syntax of the Tailwind utility-first CSS framework with those of Stylify, and give you an idea of how to migrate from Tailwind to Stylify.

If you find any incorrect or missing information, please contact <a href="mailto:dev@stylifyccss.com">dev@stylifycss.com</a> or edit this page on Github.

Introduction

Tailwind is a library that helps you rapidly build modern websites without ever leaving your HTML. It’s a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Stylify CSS is a library that uses native 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.

Selectors and CSS Utilities

Tailwind provides a lot of flexible CSS utilities for properties like color, spacing, typography, visibility, etc:

<div class="
	bg-slate-100
	rounded-xl
	p-8
	top-[117px]
	md:flex
"></div>

Stylify uses CSS-like utilities, that can be used directly within the class attribute. There are no shortcuts by default and selectors cannot contain a space because of the further optimization:

<div class="
	color:blue
	font-weight:bold
	md:color:red
	md&&landscape:font-size:32px
	minw123px:font-size:123px
"></div>

When some selectors have the same pseudo-class or even media query, you can group them like this:

<div class="
	hover:{color:blue;text-decoration:underline}
	md:hover:{transform:scale(1.1);left:4px}
"></div>

Global Selectors

When you want to select for example child elements in Tailwind, you can use arbitrary variants for that:

<div class="
	[&>*]:underline
	[&>p]:mt-0
"></div>

Stylify provides custom selectors with which you can style elements globally. These selectors can be defined directly within the class attribute or in the global config or in a file where they are used using content options.

Example with the class attribute:

<div class="[.button_.icon]{font-size:14px}">
	<button class="
		[.icon]{color:#fff;border-radius:12px}
		[&+button]{margin-left:24px}
	">
		<i class="icon"></i>
	</button>
	<button></button>
<div>

The syntax pattern in the class attribute looks like this:

[css selectors]{stylify selectors split by ;}

The _ (underscore) is used instead of space in both CSS and Stylify selectors and the & character always refers to the current element.

The same code but in the global config would look like this:

const compilerConfig = {
	customSelectors: {
		'.buttons-wrapper .button .icon': 'font-size:14px',
		'.button': `
			.icon { color:#fff border-radius:12px }
			& + button { margin-left:24px }
		`,
	}
}

When defining `customSelectors` in the global config on through content options, the syntax lets you use a nesting feature. The & characters refers to the upper level like in the SCSS.

Usage of the global config:

<div class="buttons-wrapper">
	<button class="button">
		<i class="icon"></i>
	</button>
	<button></button>
<div>

Components

Components in Tailwind can be defined using @apply rule. Also they can be nested into CSS layers:

@layer components {
	.btn-primary {
		@apply py-2 px-4 bg-blue-500 text-white;
	}
}

Tailwind also provides a lot of copy&paste components on their website.

Stylify doesn't provide any predefined CSS Components by default. However, it provides two ways to define them and there is a set of copy&paste Headless Components you can use in your project.

Components can be configured in a file (using content options), where they are used, or globally within a $projectConfig.

Example with the configuration within a file. The content between stylify-components expects javascript object without surrounding brackets:

<!--
stylify-components
	title: 'color:blue font-weight:bold md:color:red'
/stylify-components
-->
<h1 class="title"></h1>

Example in a global compiler config:

const compilerConfig = {
	components: {
		title: 'color:blue font-weight:bold md:color:red'
	}
};

Usage:

<h1 class="title"></h1>

When defining component, you can also use nesting syntax like in SCSS. This works in a global config and also in the content options:

const compilerConfig = {
	components: {
		button: `
			color:black font-weight:bold
			&:hover { color:grey }
			&--red {
				color:red
				&:hover { color: darkred }
			}
		`
	}
};

Configuration, Customization and Variables

Tailwind can be configured within a config file by extending/overriding an existing theme:

module.exports = {
	content: ['./src/**/*.{html,js}'],
	theme: {
		colors: {
			'blue': '#1fb6ff',
		},
		fontFamily: {
			sans: ['Graphik', 'sans-serif'],
		},
		extend: {
			spacing: {
				'8xl': '96rem',
				'9xl': '128rem',
			},
			borderRadius: {
				'4xl': '2rem',
			}
		}
	},
}

In Stylify, there is nothing like a "theme", neither extend section in $projectConfig. There are only variables.

Variables can be defined in two ways in Stylify. In a global config or within a file where they are used via content options.

Example with global config:

const compilerConfig = {
	variables: {
		primary: '#000',
		secondary: '#eee',
		titleFontSize: '24px',
		shadow: '0 2px 3px #000'
	}
}

Variables can also be defined based on media query:

const compilerConfig = {
	variables: {
		dark: { blue: 'lightblue' },
		md: { fontSize: 24px },
		'minw640px': { fontSize: 32px },
		// When screen is not found, it falls back to a random custom selector
		'.dark': { blue: 'lightblue' },
		':root[data-theme="dark"]': { blue: 'lightblue' }
	}
}

Example with content options:

<!--
stylify-variables
	primary: '#000',
	secondary: '#eee'
	titleFontSize: '24px',
	shadow: '0 2px 3px #000'
/stylify-variables
-->
<div class="color:$primary"></div>