I want to make my headings h1, h2, h3 etc responsive. I thought I could do something like:
h1 {
#apply text-lg lg:text-2xl xl:text-3xl;
}
But then I get an error.
How do I solve this best?
UPDATE:
This question was asked when Tailwind 1.2 was in use. Since version 1.7 Tailwind supports pseudo classes in #apply directive. In first it was experimental feature that had to be turned on manually in config, but currently it is normal functionality.
So code from question will work just fine.
Source: https://blog.tailwindcss.com/tailwindcss-1-7
Unfortunately you cannot do it that way:---
From tailwind docs:
It's important to understand that #apply will not work for inlining pseudo-class or responsive variants of another utility. Instead, apply the plain version of that utility into the appropriate pseudo-selector or a new media query
https://tailwindcss.com/docs/functions-and-directives/
Instead you have #screen for this. So in your case it will be.
h1 {
#apply text-lg;
#screen lg {
#apply text-2xl;
}
#screen xl {
#apply text-3xl;
}
}
Or
h1 {
#apply text-lg;
}
#screen lg {
h1 {
#apply text-2xl;
}
}
#screen xl {
h1 {
#apply text-3xl;
}
}
Related
I have a typography.css file with code such as:
#layer base {
.p {
#apply font-light;
}
.p.subheading {
#apply font-normal;
}
.p.xxl {
font-size: 1.5rem;
}
.p.xl {
font-size: 1.375rem;
}
}
For example.
In my post.css file, I apply classes to items inside a .post:
.post {
h1,
h2 {
#apply p xxl subheading;
}
h3,
h4 {
#apply p xl subheading;
}
p {
#apply p;
}
ul {
#apply p list-disc list-inside;
}
p strong {
#apply p subheading;
}
}
However, the generated code applies the font-weight of the p and not the subheading and I must use font-normal for it to work. Additionally, no matter what I do, I cannot get the font-size to be reflected by #applying my custom class.
My app.css file includes them in the following order:
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
#import "base/typography.postcss";
#import "parts/post.postcss";
Thanks in advance.
Please read the docs about Tailwind layers carefully. When looking at your code, here are my suggestions:
The base layer is meant to override default styles of basic plain HTML elements (you are defining new CSS classes here).
However, the components layer is a good place for additional classes such as .post
You gave your files a .postcss file extension in your app.css. In case this wasn't intentional, you might want to remove that completely or give it a .css extension.
That being said, I would organize your code like this:
#import "tailwindcss/base";
#import "tailwindcss/components";
#layer components {
.post h1,
.post h2 {
#apply text-2xl font-normal;
}
.post h3,
.post h4 {
#apply text-xl font-normal;
}
.post p {
#apply font-light;
}
.post ul {
#apply font-light list-disc list-inside;
}
.post p strong {
#apply font-normal;
}
}
#import "tailwindcss/utilities";
Of course you can put the .post rules into a separate file. Also this is a good read about that topic of organizing your CSS with Tailwind.
Hope this helps or at least gives some pointers.
i'm styling a React component with css modules.
there's a part where i insert html code using dangerouslySetInnerHTML
<div className={styles.article_text} dangerouslySetInnerHTML={{__html: props.text}} />
i have no control over this html code but i want to style it. i can style the html by using tag rules like this:
.article_text {
h2 {
#apply text-3xl mt-6 mb-4; /* this is applied to headings ... */
}
p {
#apply mb-3; /* and paragraphs */
}
...
what's not working is styling css classes this way:
.article_text {
.listblock {
#apply bg-white; /* this doesnt apply to the div.listblock inside the html code*/
}
is there a way i can get this to work?
I was thinking that Tailwind CSS with CSS modules / post css will work nicely together. to write less code and generate less CSS but...
when I used tailwind with #apply it just applies styles to that class
example
.root {
#apply flex align-center;
}
from styles.root to "root flex align-center"
but instead it just add css to .root class
I think that it should work as composes: flex align-center from global;
Is my configuration wrong or it's just working in that way?
That is just how the #apply directive works. #apply is used to inline any existing utility classes into your own custom CSS.
/* Input */
.root {
#apply flex items-center;
}
/* Output */
.root {
display: flex;
align-items: center;
}
I'd like to take some legacy CSS files and convert them to SCSS with nested styles. For example:
Input
#SomeElement .button { /*Some styles*/ }
#SomeElement .link { /*Some styles*/ }
Output
#SomeElement {
.button { /*Some styles*/ }
.link { /*Some styles*/ }
}
Is there any tool to make this project manageable with thousands of lines of CSS to convert? I understand there may be some edge cases that need manual fixing, but it would be great to be able to jump start the process with some sort of automatic conversion.
Would PostCSS or Gulp have any tools I could leverage?
Thanks for reading.
By using this you can change your css to scss
http://css2sass.herokuapp.com/
Using Gulp
https://www.npmjs.com/package/gulp-css-scss
Using SCSS, I'd like to style all h3 elements that are of type .some-base, but it seems like I need to define the override in the derived styles. So
Doesn't work:
.some-base {
h3 {
margin-right: 3px;
}
}
.some-derived {
#extend .some-base;
}
Does work:
.some-base {
}
.some-derived {
#extend .some-base;
h3 {
margin-right: 3px;
}
}
Any way to get the first method to work so I don't need to redefine this in each override?
.some-base doesn't have any styles applied to itself. If you put color: red on .some-base in example 1, you'll see it inherited by .some-derived (note: it needs to go in .some-base, not .some-base h3).
It's not possible to extend nested classes though, so you can't extend .some-base and get the h3 styles defined inside it (100% sure on this one), nor can you extend .some-base h3 if it's defined as a nested class. If you define .some-base h3 {} as its own rule instead of .some-base { h3 {} } then you can extend it (95% sure on this one).