## 💎 @stylify/stylify introduction Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS dynamically based on what you write.
Don't study framework. Focus on coding.

## ⚡ Why Stylify instead of CSS or inline styles? Because of [fewer CSS headaches](https://stylifycss.com/docs/get-started/why-stylify-css#problems-stylify-css-tries-to-solve), [faster coding](https://stylifycss.com/docs/get-started/why-stylify-css#faster-coding) and [extremely optimized output](https://stylifycss.com/docs/get-started/why-stylify-css#output-optimization). ## ✨ Features - 💎 [Syntax you already know](https://stylifycss.com/#zero-learning-curve). Don't waste time studying CSS framework. - 💎 Less switching between HTML/CSS files - 💎 [Automagic and Extremely tunned CSS optimization](https://stylifycss.com/#optimization) - 💎 [Simple CSS Bundles splitting](https://stylifycss.com/#bundles-splitting) for Layouts/Pages - 💎 [Easily Configurable and Extensible](https://stylifycss.com/#configuration) - 💎 [Prepared components](https://stylifycss.com/#components) - 💎 Define [Variables](https://stylifycss.com/docs/stylify/compiler#variables), [Components](https://stylifycss.com/docs/stylify/compiler#components), [Custom selectors](https://stylifycss.com/docs/stylify/compiler#customselectors) - 💎 [Add custom macros](https://stylifycss.com/docs/stylify/compiler#macros) like ml:2 - 💎 Variables can be injected into CSS as CSS variables - 💎 CSS [variables can differ for each screen](https://stylifycss.com/docs/stylify/compiler#variables) - 💎 Simplify coding with [helpers](https://stylifycss.com/docs/stylify/compiler#helpers) like `color:lighten(#000,10)` - 💎 Style any device with dynamic [screens](https://stylifycss.com/docs/stylify/compiler#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](https://stylifycss.com/docs/integrations) like Next.js, Astro.build, 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 files and reused

## 🚀 Integrations Start using Stylify with your favorite tool in a minute. ### JavaScript ### PHP ## 🔥 Prepared Copy&Paste Headless Components ## Want to know more? - Live examples and tutorials can be found in [documentation](https://stylifycss.com/docs/stylify). - Information about each release can be found in [releases](https://github.com/stylify/packages/releases). - Have an idea? Found a bug? Feel free to create an [issue](https://github.com/stylify/packages/issues). ## Compatibility | Environment | Version | Note | |-------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------| | Browser | [ES5-compliant browsers](https://caniuse.com/?search=ES5), [Intersection Observer support](https://caniuse.com/?search=intersection%20observer) is required. | Stylify doesn't need to be included in the browser. All CSS can be pregenerated on server or during a build. | | Node | >= 14 | In case Stylify will be used during an application build or in an SSR application. | ## Stay In Touch - Visit Stylify website [https://stylifycss.com](https://stylifycss.com). - Follow Stylify on [Twitter](https://twitter.com/stylifycss). - Join Stylify community on [Discord](https://discord.gg/NuJsk5SMDz). ## License [MIT](https://opensource.org/licenses/MIT) Copyright (c) 2021-present, Vladimír Macháček