Getting Started

Framework Integration

In most cases, you'll install rswind as a framework plugin.

Requirements

• Node.js version 18 or higher.

Vite

npm

npm install @rswind/vite -D

yarn

yarn add @rswind/vite -D

pnpm

pnpm install @rswind/vite -D

Then, add @rswind/vite to your vite.config.ts:

import { defineConfig } from 'vite'
import rswind from '@rswind/vite'
// other imports

export default defineConfig({
  plugins: [
    rswind(),
    // other plugins
  ]
})

Next, add rswind.css to your entry file:

vue

import { createApp } from 'vue'
import App from './App.vue'
import 'rswind.css'

createApp(App).mount('#app')

react

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import 'rswind.css'

ReactDOM.render(<App />, document.getElementById('root'))

svelte

import App from './App.svelte'
import 'rswind.css'

new App({
  target: document.body
})

Now, just run your project, you can start typing rswind classes in your components!

Have a try:

vue

<template>
  <div class="bg-blue-50 text-2xl text-blur-500">
    Hello, rswind!
  </div>
</template>

react

export default () => {
  return <div className="bg-blue-50 text-2xl text-blur-500">Hello, rswind!</div>
}

svelte

<div class="bg-blue-50 text-2xl text-blue-500">Hello, rswind!</div>

Webpack

todo!("Coming soon...")