tailwind-cssresponsive

Is there a way to define custom responsive classes?

I am fairly new to tailwind. I'm trying to find an elegant way to define classes for different screen sizes.

Given that I have different screen sizes to handle different font sizes in each screen size and use one class.

Media queries would be a go to solution for this but I wanted find out if there is a way to do something like this:

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

@layer components {
    .h1 {
        @apply sm:font-size-[33px] md:font-size-[35px] lg:font-size-[43px];
    }
}

Unfortunately with the above I am getting an error:

X [ERROR] The sm:font-size-[33px] class does not exist. If sm:font-size-[33px] is a custom class, make sure it is defined within a @layer directive. [plugin angular-sass]

styles/ci-font-styles.scss:3:3:
  3 │     @apply sm:font-size-[33px] md:font-size-[35px] lg:font...
    ╵    ^
Solution

  • According to the documentation on Font Size (https://tailwindcss.com/docs/font-size#arbitrary-values)

    You would need to use text-[...px] instead of font-size-[...px].

    Something like

    @layer components {
    .h1 {
        @apply sm:text-[33px] md:text-[35px] lg:text-[43px];
    }
}

    should work.