Thursday, March 16, 2023
HomeJavascriptCode your Laravel web site quicker with Stylify CSS

Code your Laravel web site quicker with Stylify CSS

Code your Laravel web site quicker with Stylify CSS-like utilities. Do not research CSS framework. Deal with coding.


Stylify is a library that makes use of CSS-like selectors to generate optimized utility-first CSS primarily based on what you write.

  • ✨ CSS-like selectors
  • 💎 No framework to check
  • 💡 Much less time spent in docs
  • 🧰 Mangled & Extraordinarily small CSS
  • 🤘 No purge wanted
  • 🚀 Parts, Variables, Customized selectors
  • 📦 It might probably generate a number of CSS bundles

Set up

This text makes use of Laravel with Vite. For older variations with Webpack, try this information.

Set up Stylify utilizing CLI:

npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin

Add the next configuration into vite.config.js:

import { defineConfig } from 'vite';
import { stylifyVite } from '@stylify/unplugin';

const stylifyPlugin = stylifyVite({
    bundles: [{ files: ['resources/views/**/*.blade.php'], outputFile: 'sources/css/stylify.css' }],
    compiler: {
        variables: {},
        macros: {},
        parts: {},

export default defineConfig(() => ({
    plugins: [
            input: ['resources/js/app.js', 'resources/css/stylify.css'],
            refresh: true,

Add the trail to sources/css/stylify.css into the template:


In case you outline multiple bundle in stylifyVite plugin, ensure to import generated CSS recordsdata on right pages.


Stylify syntax is just like CSS. You simply write _ as a substitute of an area and ^ as a substitute of a quote.

So if we edit the sources/views/welcome.blade.php:

<div class="text-align:heart font-size:48px shade:blue">Stylify + Laravel = 🚀</div>

In manufacturing, you’ll get optimized CSS and mangled HTML:

<div class="a b c">Stylify + Laravel = 🚀</div>

Integration instance

You can too try our Laravel integration instance on Github.


The examples above do not embody every little thing Stylify can do:

Be at liberty to try the docs to be taught extra 💎.


Most Popular

Recent Comments