I'm working with TailwindCSS and I created entity like this:
#layer screens {
#responsive {
.flex-row-around {
#apply flex flex-row justify-around;
}
.flex-col-around {
#apply flex flex-col justify-around;
}
}
}
I've generated stylesheet and now I'm trying to use it:
<div class="flex-col-around md:flex-row-around">
...
</div>
But my styles are not added. What is done wrong?
TailwindCSS does not have a screens layer. Looks like you're trying to create a new utility, in which case you'd want to use the utilities layer.
#layer utilities {
#responsive {
.flex-row-around {
#apply flex flex-row justify-around;
}
.flex-col-around {
#apply flex flex-col justify-around;
}
}
}
Here's the docs for reference:
https://tailwindcss.com/docs/functions-and-directives#layer
P.S. If you want to use the new just-in-time compilation, it will generate the responsive utilities automatically without needed to specify them. This feature is currently experimental, but I have been using it in production for a few months now without issue.
#layer utilities {
.flex-row-around {
#apply flex flex-row justify-around;
}
.flex-col-around {
#apply flex flex-col justify-around;
}
}
https://tailwindcss.com/docs/just-in-time-mode#enabling-jit-mode
Related
I need to apply this line of CSS to my layout:
grid-template-columns: auto 1fr;
Is this something you can't do with Tailwind CSS?
You can extend the utilities using your Tailwind CSS config:
module.exports = {
theme: {
extend: {
gridTemplateColumns: {
'my-columns': 'auto 1fr'
}
}
}
};
<div class="grid grid-cols-my-columns">
</div>
Or you can use arbitrary values if you're only using this layout in one place:
<div class="grid grid-cols-[auto_1fr]">
</div>
There's more details in the documentation.
I am trying to build a dropdown with tailwind CSS(v2.2.15) group and group-hover classes. It works fine when I use them in HTML directly. But when I use it in custom class with #apply it doesn't work.
Custom classes:
.dropdown-container {
#apply group inline-block relative;
}
.dropdown-list {
#apply absolute
hidden
-left-16
top-0
rounded-lg
text-sm
group-hover:block;
}
but if I use the group in HTML directly it works fine. I also extend the group hover for display in tailwind.config.js
tailwind.config.js
variants: {
extend: {
display: ['group-hover']
}
},
Is it possible to use this feature in custom class
This doesn't answer your exact question, but tailwind provide a huge bunch of pre-built components you can just cut and paste to save reinventing the wheel: https://tailwindcomponents.com/components/dropdowns
I had issues using group-hover inside #apply, so i just used vanilla css
.parent-class:hover .child-class {
#apply your-tailwind-classes
}
If you want to use custom classes when using group-hover inside the template:
in css file
#tailwind utilities;
#layer utilities {
.hover-small { #apply your--tailwind-classes; // or normal css }
.hover-large { #apply your--tailwind-classes; // or normal css }
}
in html just use group-hover with these custom utilities
<span class="handle transition duration-300
rounded-full group-hover:custom-hover-small">
</span>
In my case i needed dynamic class depending on the size prop
<span class="handle transition duration-300 rounded-full"
:class="`group-hover:hover-${size}`">
</span>
but for that to work i had to add these specific classes in tailwind.config.js safelist so its pre-generates it
safelist: ['group-hover:hover-small', 'group-hover:hover-large'],
I have a custom class set-up, I'm trying to add variants but seems the behaviour doesn't change from classic CSS.
#layer components {
#variants hover, focus {
.btn-primary {
background-color:blue;
}
}
.btn-primary{
#apply bg-primary rounded-sm border-4 border-primary rounded-sm text-white text-base py-2 px-4 capitalize transition-all;
}
}
If the variants is after the .btn-primary, then it applies the blue background like it's nothing.
Hover nor focus work.
Here what I've add in my tailwind config based on other posts I've seen :
variants: {
extend: {
backgroundColor: ['hover'],
}
}
You can simply use the hover: and focus: prefixes directly in your .btn-primary definition.
.btn-primary {
#apply bg-primary hover:bg-blue-700 focus:bg-blue-700 rounded-sm border-4 text-white text-base py-2 px-4 capitalize transition-all;
}
You also don't need to add the hover and focus variants to the backgroundColor property in the config as it's already enabled by default.
Question is not clear but I'll break it down. In angular we can write isolated css for styling. It works pretty well for native html elements. But unlike react, angular wrap our html with custom elements like <app-card>...</app-card>. When I write css for those wrapper elements, it doesn't work .
If I have a post list like
<div class="post-list">
<app-card [post]="post" *ngFor="let post of posts"></app-card>
</div>
If I write css to apply some vertical gap between app-card components in PostListComponent. Well nothing happens.
.post-list app-card:not(:last-child) {
margin-bottom: 2rem;
}
How can I make it work? Or with angular logic, how can I apply vertical gap between angular components
Just add display: block; on your app-card component & it will work as expected.
.post-list app-card {
display: block;
}
.post-list app-card:not(:last-child) {
margin-bottom: 2rem;
}
<div class="post-list">
<app-card>Card 1</app-card>
<app-card>Card 2</app-card>
<app-card>Card 3</app-card>
</div>
You can define encapsulation: ViewEncapsulation.None in your Component like this:
#Component({
selector: 'foo',
template: './foo.component.html',
styleUrls: ['./foo.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class FooComponent { }
Which will treat your .css as the same if you were putting it in the global scope.
To be more accurate, it won't append .fooComponent to each css rule in foo.component.scss.
You can make the iteration in div tag then add your class
<div class="post-list">
<div class="post" *ngFor="let post of posts">
<app-card [post]="post"></app-card>
</div>
</div>
And in your css
.post-list .post:not(:last-child) {
margin-bottom: 2rem;
}
There is no reason it shouldn't work. Just tried to put in some of your code here. https://stackblitz.com/edit/angular-scss-demo-icqrye
app.component.html
<div class="post-list">
<app-new *ngFor="let item of [1,2,3,4]"></app-new>
</div>
styles.scss
.post-list app-new:not(:last-child) p {
margin-top: 2rem;
color: green;
}
And it works perfectly. Are you looking for something else?
And if you want to add the style (margins) to the component directly, you will first need to set the display of the component to block/flex as per requirement.
.post-list app-new:not(:last-child) {
display: flex;
}
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 3 years ago.
I have plenty of Angular mat-cards i.e. uncertain number of cards with images of different sizes.
What i am trying implement is a auto fill and adjustment of such cards depending on the container, something like this.
Now example above is using 4 columns and possible using grid.
Now, how do I implement that with cards? I tried using flex but somehow not able to properly implement it. Here's my worthless try.
<div class="mat-card-container" style="
display: flex;
justify-content: center; /* Add this */
flex-wrap: wrap;
">
<div class="mat-card-holder" style="
margin:0.6em;
width:220px;
" *ngFor="let art of arts.records">
<mat-card class="art-card" >
<mat-card-header>
<mat-card-title>{{ art.TITLE }}</mat-card-title>
<mat-card-subtitle>{{ art.AUTHOR }}</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="http://localhost/piwigo/{{ art.URL }}" alt="Photo of a Shiba Inu">
<mat-card-content>
{{art.TECHNIQUE}} / {{art.SCHOOL}} / {{art.FORM}} / {{art.TYPE}} / {{art.LOCATION}}
</mat-card-content>
</mat-card>
</div>
</div>
This is giving me this much, but still there are alot of gaps to be covered.
This is only lining them up in columns, how to i dynamically fill and adjust these in container? Assuming if container size changes, cards should rearrange without changing their own css i.e. dimensions. Is my code correct uptill? And how do i fill the gap in between?
To the extend of my knowledge, this layout style you are looking to implement cannot be achieved by css in of itself.
With some help from a javascript helper library, this is easily implemented. As you are using Angular, this is an Angular wrapper to the previous library which will permit to do such a design.
Replying from my phone and can't really reproduce your exact ui, but copying verbatim here their example implementation,
App.module.ts
import { MasonryModule } from '#thisissoon/angular-masonry';
const masonryProviders = [
{ provide: Masonry, useFactory: () => window['Masonry'] },
];
#NgModule({
imports: [MasonryModule.forRoot(masonryProviders)],
})
export class AppModule {}
angular.json
"scripts": [
"../node_modules/masonry-layout/dist/masonry.pkgd.js"
],
app.component.ts
export class AppComponent implements AfterViewInit, OnDestroy {
#ViewChild('grid') public grid: ElementRef;
public masonryInstance: MasonryInstance;
public cards = cards;
constructor(#Inject(Masonry) public masonry) {}
ngAfterViewInit() {
const options: MasonryOptions = {
itemSelector: '.card',
columnWidth: '.card',
gutter: 20,
fitWidth: true,
};
this.masonryInstance = new this.masonry(this.grid.nativeElement, options);
}
layout() {
this.masonryInstance.layout();
}
ngOnDestroy() {
this.masonryInstance.destroy();
}
}
app.component.css
:host {
display: block;
margin-top: 1rem;
}
.grid {
margin: 0 auto;
}
.card {
display: inline-block;
margin-bottom: 1rem;
width: 18rem;
}
app.component.html
<div class="grid" #grid>
<div class="card" *ngFor="let card of cards">
<div class="card-body">
<h5 class="card-title">{{ card.title }}</h5>
<p class="card-text">{{ card.text }}</p>
Go somewhere
</div>
</div>
</div>