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

This guide is here to help you quickly compare the features and syntax of the Tachyons utility-first CSS framework with those of Stylify, and give you an idea of how to migrate from Tachyons 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

Tachyons is a framework that lets you create fast loading, highly readable, and 100% responsive interfaces with as little CSS as possible.

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

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

<div class="flex">
	<div class="outline w-25 pa3 mr2">
		<code>1</code>
	</div>
</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

I could not find any information suggesting that Tachyons provides something like dynamic Global Selectors.

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

Tachyons doesn’t have any configuration API for components. However, it has a prepared set of copy&paste components on its website you can use in your project and you can configure them in configurator mentioned on their website:

<div class="ph3">
	<h1 class="f6 fw6 ttu tracked">Basic button</h1>
	<a class="f6 link dim ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
</div>

<article class="mw5 mw6-ns center pt4">
	<div class="aspect-ratio aspect-ratio--16x9 mb4">
		<div class="aspect-ratio--object cover"></div>
	</div>
</article>

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

Tachyons can be configured directly by modifying downloaded CSS files. You can also use tachyons with CSS variables and define your own sizes, colors, etc.

They have a video on their website on how to do so.

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>

Integrate Stylify into your favorite tool

Stylify can be used in various tools. Pick your favorite tool and start using Stylify CSS in a minute.

Get Started

Speed up development with prepared Headless CSS Components

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