How to do css var in tailwind

Tim Van Lerberg answered on November 27, 2022 Popularity 10/10 Helpfulness 1/10

answer How to do css var in tailwind

related css variable tailwind

How to do css var in tailwind

Comment

CSS vars in Tailwind

//* 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

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: css javascript var

Link to this answer
Share Copy Link

Contributed on May 13 2023

Tim Van Lerberg

0 Answers Avg Quality 2/10

Closely Related Answers

css variable tailwind

Comment

<style> 
:root {
  --orange: #FF7E00;
  --blue:   #00AEFF;
}
</style>

/* Change text color */
hover:text-[color:var(--orange)]

/* Change background color */
bg-[color:var(--blue)]

Popularity 10/10 Helpfulness 4/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Nov 27 2022

Zidane (Vi Ly - VietNam)

0 Answers Avg Quality 2/10

How to do css var in tailwind

Contents

More Related Answers