Tailwind Soft Pop Plugin

A Tailwind CSS v4 plugin that implements the "Soft Pop" design system. This plugin provides a vibrant, playful aesthetic with hard shadows, bold borders, and a comprehensive color palette using accessible oklch colors.

Features

- 🎨 Radiant Colors: Complete 50-950 color palette using oklch for Primary, Secondary, Accent, Base, Neutral, and functional colors (Success, Warning, Error, Info).
- 🔤 Typography: Pre-configured font families (Nunito for headings, Mulish for body).
- 📦 Components: Ready-to-use accessible components like Buttons and Cards.
- 📏 Layout: Responsive container utilities.
- 🔍 Container Queries: Intelligent card layouts that adapt to their container size.

Installation

``bash
npm install tailwind-softpop-plugin


or

`css
@import "tailwindcss";
@import "tailwind-softpop-plugin";
`

This will automatically configure the theme variables, base styles, and load the component plugin.

Design System

$3

The system uses oklch for inconsistent perceptual brightness.

- Primary: Cyan/Blue tones
- Secondary: Orange/Yellow tones
- Accent: Purple/Pink tones
- Neutral: Slate/Grey tones

$3

#### Buttons (.btn)

Available variants:

- .btn-primary
- .btn-secondary
- .btn-outline

`html
Click Me
`

#### Cards (.card)

Responsive cards that support Container Queries.

`html


Horizontal Card:
Add .horizontal to make the card adapt to a row layout when width permits (>450px).

`html


#### Section Container (.section-container)

A responsive container that handles max-width and padding automatically across breakpoints.

`html


License

MIT © CarfDev