Packages

<br> <p align="center"> <a href="https://stylifycss.com" target="_blank" rel="noopener noreferrer"> <img src="https://stylifycss.com/images/logo/horizontal.svg?v2" height="100" alt="Stylify logo"> </a> </p> <br> <p align="center"> <a href="https://discord.gg/NuJsk5SMDz"><img src="https://img.shields.io/badge/chat-on%20discord-7289da.svg?sanitize=true" alt="Chat"></a> <a href="https://github.com/stylify/packages/discussions"><img src="https://user-images.githubusercontent.com/14016808/132510133-76bb66a9-951f-4411-9236-140cac7b7472.png"></a> <a href="https://twitter.com/stylifycss"><img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/stylifycss?style=social"></a> <a href="https://github.com/stylify/packages"><img alt="GitHub Org's stars" src="https://img.shields.io/github/stars/stylify/packages?style=social"></a> <a href="https://github.com/stylify/packages/blob/master/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/stylify/packages"></a> <br> <a href="(https://github.com/stylify/packages/actions/workflows/tests.yaml"><img alt="GitHub Workflow Status (branch)" src="https://github.com/stylify/packages/actions/workflows/tests.yaml/badge.svg"></a> <a href="https://codecov.io/gh/stylify/packages"><img src="https://codecov.io/gh/stylify/packages/branch/master/graph/badge.svg?token=ZJLKX877DF"/></a> <a href="https://github.com/stylify/packages/issues"><img alt="GitHub issues" src="https://img.shields.io/github/issues/stylify/packages"></a> <a href="https://github.com/stylify/packages"><img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/stylify/packages"></a> <a href="https://github.com/stylify/packages/releases"><img alt="GitHub release (latest by date)" src="https://img.shields.io/github/v/release/stylify/packages"></a> <a href="https://github.com/stylify/packages"><img alt="GitHub contributors" src="https://img.shields.io/github/contributors/stylify/packages"></a> </p>

💎 Introduction

Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS dynamically based on what you write.<br> Don't study framework. Focus on coding.

<p align="center"> <img src="https://raw.githubusercontent.com/stylify/packages/master/stylify-intro-v2.gif" alt="Stylify preview"> </p>

⚡ Why Stylify instead of CSS or inline styles?

Because of fewer CSS headaches, faster coding and extremely optimized output.

✨ Features

• 💎 Define Variables, Components, Custom selectors
• 💎 Add custom macros like ml:2
• 💎 Variables can be injected into css as CSS variables
• 💎 CSS variables can differ for each screen
• 💎 Simplify coding with helpers like color:lighten(#000,10)
• 💎 Style any device with dynamic screens
• 💎 You can mark areas for which CSS should not be
• 💎 Split bundles for page/layout/component
• 💎 Selectors are minified from long .color:blue to short .a
• 💎 No purge needed. CSS is generated only when something is matched
• 💎 Components & Custom selectors are attached to utilities. No duplicated property:value
• 💎 Hooks can modify CSS or output for example wrap it in CSS layers
• 💎 Mangled (hidden/unreadable) HTML classes in production (if mangled)
• 💎 Try it with frameworks like, Next.js, Astro. SolidJS, Qwik Symfony, Nette, Laravel
• 💎 Works with bundlers like Webpack, Rollup, Vite.js
• 💎 Generated CSS can be used within SCSS, Less, Stylus
• 💎 CSS variables can be exported into external file and reused

<p align="center"><a href="https://stylifycss.com"><img src="https://user-images.githubusercontent.com/14016808/132552680-ae877b45-5796-42df-b507-c0f6b9cf4706.png"></a></p>

🚀 Integrations

Start using Stylify with your favorite tool in a minute.

JavaScript

<a href="https://stylifycss.com/docs/integrations/nextjs"><img src="https://stylifycss.com//images/brands/nextjs-light.svg" width="80" alt=""></a> <a href="https://stylifycss.com/docs/integrations/nuxtjs"><img src="https://stylifycss.com//images/brands/nuxtjs.svg" height="65" alt=""></a> <a href="https://stylifycss.com/docs/integrations/reactjs"><img src="https://stylifycss.com//images/brands/react.png" height="50" alt=""></a> <a href="https://stylifycss.com/docs/integrations/vuejs"><img src="https://stylifycss.com//images/brands/vuejs.svg" height="50" alt=""></a> <a href="https://stylifycss.com/docs/integrations/angular"><img src="https://stylifycss.com//images/brands/angular.svg" height="65" alt=""></a> <a href="https://stylifycss.com/docs/integrations/astro"><img src="https://stylifycss.com//images/brands/astro-light.svg" height="50" alt=""></a> <a href="https://stylifycss.com/docs/integrations/remix"><img src="https://stylifycss.com//images/brands/remix.svg" height="65" alt=""></a> <a href="https://stylifycss.com/docs/integrations/solidjs"><img src="https://stylifycss.com//images/brands/solidjs.svg" height="49" alt=""></a> <a href="https://stylifycss.com/docs/integrations/qwik"><img src="https://stylifycss.com//images/brands/qwik.svg" height="55" alt=""></a> <a href="https://stylifycss.com/docs/integrations/svelte"><img src="https://stylifycss.com//images/brands/svelte.svg" height="50" alt=""></a> <a href="https://stylifycss.com/docs/integrations/vitejs"><img src="https://stylifycss.com//images/brands/vite.svg" height="50" alt=""></a> <a href="https://stylifycss.com/docs/integrations/webpack"><img src="https://stylifycss.com//images/brands/webpack.svg" height="55" alt=""></a> <a href="https://stylifycss.com/docs/integrations/rollupjs"><img src="https://stylifycss.com//images/brands/rollupjs.svg" height="45" alt=""></a> <a href="https://stylifycss.com/docs/integrations/nodejs"><img src="https://stylifycss.com//images/brands/nodejs.svg" height="50" alt=""></a>

PHP

<a href="https://stylifycss.com/docs/integrations/symfony"><img src="https://stylifycss.com//images/brands/symfony.svg" height="70" alt=""></a> <a href="https://stylifycss.com/docs/integrations/laravel"><img src="https://stylifycss.com//images/brands/laravel.svg" height="45" alt=""></a> <a href="https://stylifycss.com/docs/integrations/nette"><img src="https://stylifycss.com//images/brands/nette.png" height="50" alt=""></a> <a href="https://stylifycss.com/docs/integrations/cakephp"><img src="https://stylifycss.com//images/brands/cakephp.png" height="55" alt=""></a>

🔥 Prepared Copy&Paste Headless Components

<a href="https://stylifycss.com/snippets/components"><img src="https://stylifycss.com/images/snippets/components/og-image.jpg"></a>

📦 Packages

| Project | Status | Description | | --------------------- | ------------------------------------------------------------ | -------------------------------------------------------------------------------------| | bundler | | A flexible CSS bundler. | | stylify | | Core package. Generates CSS and minifies selectors. |

Compatibility

| Environment | Version | Note | |-------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------| | Browser | ES5-compliant browsers, Intersection Observer support is required. | Stylify doesn't need to be included in the browser. All CSS can be pregenerated on server or during a build. | | Node | >= 18 | In case Stylify will be used during an application build or in an SSR application. |

💡 Examples, Changelog, Issues

• Live examples and tutorials: documentation
• Changelog and release changes: releases
• Have an idea? Found a bug? Feel free to create an issue

🤟 Stay In Touch

• Visit Stylify website [https://stylifycss.com](ht