@cassler/tailwind-plugin-surfaces

This plugin add a .box-* utility class for quickly applying a "surface style" to elements. This works exactly the same as .bg-* while also configuring the containers backgroundColor and borderColor, as well as the color rule for child headings, body and captions.

• Uses your theme colors.
• Dynamically apply text styles based on computed contrast.
• Simple text hierarchy styling defaults.

Install

pnpm add @cassler/tailwind-plugin-elements

Configure plugin

// tailwind.config.js
module.exports = {
   // ...your config
   plugins: [
     require('@cassler/tailwind-plugin-surfaces')
   ]
}

Usage

<div className='box-blue-800'>
   <h3>My Heading</h3>
   <p>Box content</p>
   <small>Fine print</small>
</div>

Demos

| Example Class | Output | | ----- | --- | | .box-blue-800 | | | .box-blue-100 | | | .box-slate-700 | | | .box-indigo-700 | | | .box-yellow-200 | |

Full CSS Output

To use .box-blue-100 is equal to:

.my-item { 
  background-color: theme(colors.blue.100); 
  border-color: theme(colors.blue.400);
  color: theme(colors.blue.900);
}
.my-item h1,
.my-item h2,
.my-item h3,
.my-item h4,
.my-item h5,
.my-item h6 {
  color: theme(colors.black)
}
.my-item caption, 
.my-item small,
.my-item footer {
  color: theme(colors.blue.700)
}

Convert from vanilla Tailwind

- <div className={dark ? 'bg-blue-800 text-blue-50' : 'bg-blue-50 text-blue-900'}>
-   <h3 className={dark ? 'text-white' : 'text-black'}>
-      My heading
-   </h3>
-   <p className={dark: ? 'text-blue-50' : 'text-blue-900'}>
-      Box content
-   </p>
-   <small class={dark ? 'text-blue-200' : 'text-blue-700'}>
-      Fine print
-   </small>
- </div>
+ <div className='box-blue-800 dark:box-blue-50'>
+   <h3>My Heading</h3>
+   <p>Box content</p>
+   <small>Fine print</small>
+ </div>

Bundle Analysis

size-limit is set up to calculate the real cost of your library with npm run size and visualize the bundle with npm run analyze.