@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.

Note This plugin is under active development. Output of current version may be different from the screenshot below.

• 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.