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

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
0.1.151latest

Version History

VersionDownloads (Last 7 Days)Published
0.1.151
0.1.131
0.1.121
0.1.111
0.1.101
0.1.91
0.1.81
0.1.71
0.1.61
0.1.51
0.1.41
0.1.31
0.1.21
0.1.11
0.1.01

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