xxxxxxxxxx
<style>
:root {
--orange: #FF7E00;
--blue: #00AEFF;
}
</style>
/* Change text color */
hover:text-[color:var(--orange)]
/* Change background color */
bg-[color:var(--blue)]
CSS vars in Tailwind
xxxxxxxxxx
//* Simple
export default function App() {
return (
<Body>
<Header>
</Header>
<Main>
</Main>
</Body>
)
}
const Body = tw.div`[--header-height: 8rem;]` //* Give Parent var
const Header = tw.header`h-[var(--header-height)]` //* Then use it
const Main = tw.main`h-[calc(100vh - var(--header-height))]
pt-[var(--header-height)]` //* Then use it more
This is React Code with twin.macro @emotion/styled and tailwind