Tailwind Breakpoints var

sage
,
1

Hello everyone,

I’m curious to know if there’s a method to easily access Tailwind CSS breakpoints variables and directly use them into CSS.
Something like this:

@media (min-width: #{$screen-md}) {
  .my-element {
    background-color: green;
  }
}

Thank you

2

Found it:
Use a regular media query and theme()

.card {
  border-radius: 0;

  @media (min-width: theme('screens.sm')) {
    border-radius: theme('borderRadius.lg');
  }
}

Use the @screen directive at the top-level

.card {
  border-radius: 0;
}
@screen sm {
  .card {
    border-radius: theme('borderRadius.lg');
  }
}

Source: Using with Preprocessors - Tailwind CSS