Framework Support

Plainwind understands framework-specific patterns for class composition. It works with all the major frameworks and their unique ways of handling dynamic classes.

React

Plainwind works with className and all the common composition patterns in React.

// Standard
<div className="flex items-center gap-4" />
 
// Conditional with clsx
<button className={clsx(
  'px-4 py-2',
  isActive && 'bg-blue-500',
  isDisabled && 'opacity-50'
)} />
 
// Class Variance Authority
const button = cva('px-4 py-2', {
  variants: {
    intent: {
      primary: 'bg-blue-500',
      secondary: 'bg-gray-500'
    }
  }
});
 
<button className={button({ intent: 'primary' })} />

Vue

Plainwind supports :class bindings with all syntax variants Vue offers.

<!-- Object syntax -->
<div :class="{
  'bg-blue-500': isActive,
  'opacity-50': isDisabled
}" />
 
<!-- Array syntax -->
<div :class="[
  'base-class',
  isActive && 'active-class'
]" />
 
<!-- Computed -->
<script setup>
const buttonClass = computed(() => 
  clsx('px-4 py-2', isActive && 'bg-blue-500')
)
</script>
 
<template>
  <button :class="buttonClass">Submit</button>
</template>

Svelte

Plainwind recognizes class: directives and the standard class attribute in Svelte components.

<!-- Conditional directives -->
<button
  class="px-4 py-2"
  class:bg-blue-500={isActive}
  class:opacity-50={isDisabled}
/>
 
<!-- With clsx -->
<script>
  $: buttonClass = clsx(
    'px-4 py-2',
    isActive && 'bg-blue-500'
  );
</script>
 
<button class={buttonClass}>Submit</button>

Angular

Plainwind handles [ngClass] bindings in Angular templates.

<!-- Object binding -->
<div [ngClass]="{
  'bg-blue-500': isActive,
  'opacity-50': isDisabled
}" />
 
<!-- Array binding -->
<div [ngClass]="[
  'base-class',
  isActive ? 'active-class' : 'inactive-class'
]" />
 
<!-- Individual class binding -->
<div
  class="px-4 py-2"
  [class.bg-blue-500]="isActive"
/>

Solid

Plainwind supports Solid's classList object syntax.

// classList object
<button classList={{
  "px-4 py-2": true,
  "bg-blue-500": isActive(),
  "opacity-50": isDisabled()
}} />
 
// Standard class
<div class="flex items-center gap-4" />

HTML

Plainwind works with the standard class attribute, including template literals in JavaScript contexts.

<div class="flex items-center gap-4">
  <span class="text-lg font-semibold">Title</span>
</div>

// Template literals in JS contexts
const html = `
  <div class="flex items-center ${isActive ? 'text-blue-500' : 'text-gray-500'}">
    Status
  </div>
`;

Missing Your Framework?

If your framework isn't listed here, open an issue (opens in a new tab) with your framework name and example code. We prioritize new framework support based on community interest.

Configuration Contributing