@cassler/tailwind-plugin-surfaces
TypeScript icon, indicating that this package has built-in type declarations

0.1.15 • Public • Published

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

image

  • 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 image
.box-blue-100 image
.box-slate-700 image
.box-indigo-700 image
.box-yellow-200 image

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.

Readme

Keywords

none

Package Sidebar

Install

npm i @cassler/tailwind-plugin-surfaces

Weekly Downloads

15

Version

0.1.15

License

MIT

Unpacked Size

39.7 kB

Total Files

12

Last publish

Collaborators

  • cassler