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.
Related
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;
}
}
I have something like this
.my-class {
#import url("style.less");
}
style.less contains
.second-class {
color: red;
}
I get
.my-class .second-class {
color: red;
}
I would like
.my-class.second-class {
color: red;
}
Notice the missing space in the selector. Because the element I would like to style matches .my-class and .second-class.
I am using LESS.
How to get what I want ?
As for as I know it is not possible in LESS.
You should directly add .my-class class in style.less and import that file into wherever you want or make outer HTML element with .my-class class
I'm creating css themes for our framework. I want to prefix all specific CSS rules with class namespace to make it look this way.
.my-skin .button {...}
.my-second-skin .button {...}
It's easy when using structured SCSS rules to have button.scss file and include the rules to parent this way:
//my-skin/button.scss
.button {...}
//my-second-skin/button.scss
.button {...}
//main.scss
.my-skin {
#import my-skin/button.scss
}
.my-second-skin {
#import my-second-skin/button.scss
}
//output.css
.my-skin .button {...}
.my-second-skin .button {...}
Problem occurs when prepended nested rules are used in skin files:
//my-skin/button.scss
.button {
.test & {...}
}
//main.scss
.my-skin {
#import my-skin/button.scss
}
//produced output.css
.test .my-skin .button {...}
Is there any way to produce this kind of output using directly SCSS without any post-processing? Thank you
//desired output.css
.my-skin .test .button {...}
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).
I seem to have got some brain stuck-up.
How should I design a CSS to include h1 and p that are classed intro?!
This will target all h1s and ps.
h1, p { ... }
but this
h1, p .intro { ... }
only targets h1 classed as intro, without affecting the *p*s that are classed intro. What's the syntax for that (so I don't have to define the following?
h1.intro { ... }
p.intro { ... }
I've also tested the following, without success.
h1.intro, p. intro { ... }
Almost correct. Skip the blank at p.
h1.intro, p.intro { ... }
When used as the OP pasted it, i.e.
h1.intro, p .intro { ... }
the interpretor will see a class called intro not connected to a context of anything, i.e. equivalent to the following.
h1.intro, .intro { ... }
Just use a comma to separate the selectors:
h1.intro,
p.intro {
/*...*/
}
JS Fiddle demo.
Or you could define all the common styles and then override only specific styles for those elements with that class:
.intro {
/* ...all generic default styles */
}
p.intro,
h1.intro {
/* specific style overrides for the h1 and p elements of this class */
}
JS Fiddle demo.
The reason that:
h1.intro, p. intro
doesn't work (depending on your evaluation of 'works' in this context) is that this will style an h1 of class intro, but will style an element of class intro that is a descendant of a p element, the space between the p and the .intro implies a descendant relationship.