CODEWITHSUNDEEP
responsivetailwind-csstailwind-uitailwind-3
Gabriel
Gabriel

Reputation: 111

How to make Tailwind @layer components responsive?

How do I specify the desktop version of a Tailwind @layer component class in a div? Below doesn't seem to work, it shows mobile version independent of breakpoint in Chrome:

    <button type="button" class="my-button md:my-button-desktop">Click here
    </button>

main.scss below:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .my-button {
    font-size: 1rem;
    font-weight: 100;
    line-height: 130%;
    color: theme("colors.white");
    background-color: theme("colors.btnDefault");
    border:solid;
    border-color: theme("colors.primaryColor100");
    border-width: 0.1rem;
    padding-top: 0.5rem;
    border-radius: 6px;
    padding-bottom: 1.5rem;
    text-align: center;
  }
.my-button-desktop {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 150%;
    color: theme("colors.white");
    background-color: theme("colors.btnDefault");
    border:solid;
    border-color: theme("colors.primaryColor100");
    border-width: 0.2rem;
    padding-top: 0.7rem;
    border-radius: 8px;
    padding-bottom: 2.5rem;
    text-align: left;
  }

Upvotes: 1

Views: 1317

Answers (2)

yyyuchen
yyyuchen

Reputation: 209

I think the recommended way for this is to use breakpoint-prefixed rules to target specific viewport widths rather than using @media or Tailwind's screen function:

@layer components {
  .my-button {
    /* mobile defaults */
    @apply text-sm;
    @apply font-thin;
    /* and so on... */
    
    /* desktop overrides */
    @apply lg:text-sm;
    @apply lg:font-normal;
    /* and so on... */
  }
}

If you have specific rules that you want to apply that aren't offered by Tailwind by default, you'll likely have to add your own custom rules then. Hope this helps in some way!

Upvotes: 1

Cory Sheppard
Cory Sheppard

Reputation: 31

You're able to use default CSS @media rules within your main.scss, so simply amend it to change the .my-button class when at a minimum width:

@layer components {
  .my-button {
    font-size: 1rem;
    font-weight: 100;
    line-height: 130%;
    color: theme("colors.white");
    background-color: theme("colors.btnDefault");
    border: solid;
    border-color: theme("colors.primaryColor100");
    border-width: 0.1rem;
    padding-top: 0.5rem;
    border-radius: 6px;
    padding-bottom: 1.5rem;
    text-align: center;
  }

  @media (min-width: 768px) {
    .my-button {
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 150%;
      color: theme("colors.white");
      background-color: theme("colors.btnDefault");
      border: solid;
      border-color: theme("colors.primaryColor100");
      border-width: 0.2rem;
      padding-top: 0.7rem;
      border-radius: 8px;
      padding-bottom: 2.5rem;
      text-align: left;
    }
  }
}

and then all you have to do is remove the md:my-button-desktop from your button tag.

Upvotes: 1

Related Questions