Breaking News: Grepper is joining You.com. Read the official announcement!

How to do css var in tailwind

Add Answer

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

How to do css var in tailwind

Closely Related Answers

css variable tailwind

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.