brise
A breeze of fresh air when using TailwindCSS.
brise
offers an API that is very similar to styled-components but leverages TailwindCSS (or any other global CSS classnames) instead.
Example
; const Headline = twh1` text-3xl text-blue-500`; const UnderlinedHeadline = ` underline `;
Reusing property related styles
The styles
helper can be used to create style compositions that can be reused across multiple components but maintain the ability to access properties.
const withImportant = styles` `; const Text = tw` text-base `; const Headline = tw` text-3xl underline `;
Switching on properties
The property
helper can be used to map from properties to styles.
const Headline = twh1` text-blue-600 `;
Using Custom CSS
It is possible to use the css
utility from emotion
and probably other CSS-in-JS libraries to include custom CSS.
const Button = twbutton` py-2 px-4 border border-transparent rounded bg-blue-500 text-white hover:bg-blue-700 `;