代码拉取完成,页面将自动刷新
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.
import { tw } from 'brise';
const Headline = tw.h1`
text-3xl
text-blue-500
`;
const UnderlinedHeadline = tw(Headline)`
underline
${props => (props.important ? 'font-bold' : '')}
`;
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`
${props => (props.important ? 'text-bold' : '')}
`;
const Text = tw`
text-base
${withImportant}
`;
const Headline = tw`
text-3xl
underline
${withImportant}
`;
The property
helper can be used to map from properties to styles.
const Headline = tw.h1`
text-blue-600
${property(
'size', // name of the property
{
small: 'text-2xl', // value can be a string
medium: styles`text-4xl`, // or a reusable style
large: props => 'text-6xl', // or a function
},
'medium' // default value
)}
`;
It is possible to use the css
utility from emotion
and probably other CSS-in-JS libraries to include custom CSS.
const Button = tw.button`
py-2 px-4
border border-transparent
rounded
bg-blue-500
text-white
hover:bg-blue-700
${css`
&:hover {
text-decoration: underline;
}
`}
`;
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。