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