https://github.com/taranek/tailwind-nested
Organize your Tailwind CSS classes with nested selectors for better maintainability and cleaner code.
https://github.com/taranek/tailwind-nested
classnames nesting styling tailwind tailwindcss tailwindcss-v4
Last synced: 3 months ago
JSON representation
Organize your Tailwind CSS classes with nested selectors for better maintainability and cleaner code.
- Host: GitHub
- URL: https://github.com/taranek/tailwind-nested
- Owner: taranek
- License: mit
- Created: 2025-09-15T19:44:11.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2025-09-23T08:45:03.000Z (9 months ago)
- Last Synced: 2025-10-26T03:05:53.245Z (8 months ago)
- Topics: classnames, nesting, styling, tailwind, tailwindcss, tailwindcss-v4
- Language: TypeScript
- Homepage:
- Size: 311 KB
- Stars: 2
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tailwind-nested
Organize your Tailwind CSS classes with nested selectors for better maintainability and cleaner code.
## The Problem
Complex Tailwind components often end up with messy, hard-to-maintain class strings:
```jsx
// ❌ Traditional approach - hard to read and maintain
Submit Form
```
## The Solution
With tailwind-nested, organize your styles with clean, nested objects:
```jsx
// ✅ With tailwind-nested - organized and maintainable
import { twn } from 'tailwind-nested';
Submit Form
```
## Installation
```bash
npm install tailwind-nested
yarn add tailwind-nested
pnpm add tailwind-nested
bun add tailwind-nested
```
## Vite Configuration
Add the Vite plugin to extract classes for Tailwind's JIT compiler. **Important:** The plugin must be added **before** the `tailwindcss()` plugin.
```js
// vite.config.js
import { defineConfig } from 'vite';
import { twnPlugin } from 'tailwind-nested/vite';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [
twnPlugin(), // ← Add this BEFORE tailwindcss
tailwindcss(), // ← tailwindcss comes after
],
});
```
## Usage
The Tailwind Nested plugin provides a `twn()` function, which you use to declare the TailwindCSS utilities you want to apply in a `class` or `className` attribute. The examples below are shown using React JSX syntax, but the plugin works with any JavaScript framework.
### Basic usage
Highlight the repeated variants as object keys, then list only the necessary utilities as values. Remember, in both development and production, the final class name list is generated by the Tailwind Nested plugin through the `twn()` function.
```jsx
import { twn } from 'tailwind-nested';
Click me
```
### Stacking in the key
You can also reference multiple variants together by joining them with a colon (`:`) in the key.
```jsx
import { twn } from 'tailwind-nested';
Click me
```
### Stacking in nested objects
You can also reference multiple variants together using nested objects, where the inner object's key inherits the parent key.
```jsx
import { twn } from 'tailwind-nested';
Click me
```
### ARIA Attribute Selectors
Perfect for accessibility-based styling with nested selectors:
```jsx
function AriaDemo() {
const [expanded, setExpanded] = useState(false);
return (
setExpanded(!expanded)}
className={twn('flex items-center justify-between w-full p-3 bg-white border rounded-md', {
'aria-[expanded=true]': {
// root styles for the aria-[expanded=true] state
'&': 'bg-blue-50 border-blue-300',
'[&_svg]': 'rotate-180'
},
'aria-[expanded=false]': 'bg-gray-50 border-gray-300',
hover: 'shadow-sm',
focus: 'outline-none ring-2 ring-blue-500',
})}
>
Collapsible Section
);
}
```
### Data Attribute Selectors
Dynamic styling based on data attributes:
```jsx
function FormDemo() {
const [email, setEmail] = useState('');
const [isValid, setIsValid] = useState(null);
return (
);
}
```
## Features
- 🎯 **TypeScript support** - Basic intellisense for Tailwind variants
- ✨ **Nested selectors** - Organize complex state combinations
- ⚡ **Vite plugin** - Extract classnames at build time for no performance overhead
- 🔧 **Framework agnostic** - Works with React, Vue, Svelte, and more
- 📦 **Zero runtime** - Compiles to standard Tailwind classes
## Compatibility
**✅ Supported:**
- Vite projects (React, Vue, Svelte, etc.)
- Any bundler when using only the `twn()` function
**❌ Not yet supported:**
- Astro (class extraction plugin doesn't work with Astro's build process)
- Webpack, Rollup, or other bundlers (plugin support coming soon)