React.js integration
Stylify can be used with React.js in varous ways:
- With Vite.js (this example)
- Next.js

Integration example for the Vite.js can be found in
integrations examples repository
.
How to integrate the Stylify with React.js and Vite.js
The example bellow works with the Vite - React.js template. You can however use the example bellow and configure it for Svelte, Vue and any other framework you use.
First install the @stylify/unplugin package using NPM or Yarn:
npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin
Next add the following configuration into the vite.config.js
:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { vitePlugin } from '@stylify/unplugin';
const stylifyPlugin = vitePlugin({
transformIncludeFilter: (id) => {
return id.endsWith('js') || id.endsWith('ts') || id.endsWith('tsx') || id.endsWith('jsx');
},
bundles: [{
outputFile: './src/stylify.css',
files: ['./src/**/*.js', './src/**/*.ts', './src/**/*.jsx', './src/**/*.tsx'],
}],
extend: {
bundler: {
compiler: {
selectorsAreas: [
'(?:^|\\s+)className="([^"]+)"',
'(?:^|\\s+)className=\'([^\']+)\'',
'(?:^|\\s+)className=\\{`((?:.|\n)+)`\\}'
]
}
}
}
});
export default defineConfig({
plugins: [stylifyPlugin, react()]
});
Now you can add the path to the generated src/stylify.css
into src/main.js
file:
// ..
import './assets/stylify.css';
Now run yarn dev
. The src/stylify.css
file will be generated.
Configuration
There is a lot of options you can configure:
Where to go next?
- 🚀 Learn how to get started
- 🔌 Checkout @stylify/unplugin configuration
- ⚙️ Or configure Stylify right away: