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...
╵ ^
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.