Having followed the guidance on how to create print-specific modifiers, is it possible to use that to create or modify components for that screen?
For example, I have
.card {
#apply rounded shadow bg-white p-3;
}
I'm thinking of something like the following, but this isn't it - what should I be doing?
.card:print {
#apply rounded border border-black bg-white p-3;
}
You should use media queries for this
#media print {
.card {
#apply rounded border border-black bg-white p-3;
}
}
Related
In my react app, using tailwind css, is there any global settings i can adjust so that my fonts scale with the screen size. For example, at screens larger than 2xl, i would like my text-sm to be 1 rem instead of the default 0.875rem
In your CSS you can add:
#media (min-width: 1536px) {
.text-sm {
font-size: 1rem !important;
}
}
This will essentially overwrite the font-size property of any element which is tagget with the text-sm class.
The 1536px comes from the official Tailwind references which explain responsive design in detail.
You need to add !important in order to force the CSS to apply.
Tailwind provides responsive utility variants sm, md, lg, xl and 2xl, and you can define your own as well.
I can use them in class names:
<img class="w-16 md:w-32" src="...">
But can I also use them in PostCSS?
For example, I'm hoping to do something like this (the code doesn't actually work):
img {
#apply w-16;
/* I want this section to apply whenever the `md` media query applies. */
md:& {
#apply w-32;
}
}
Yes you can do it with #screen directive or screen() function
img {
#apply w-16;
#screen md {
#apply w-32;
}
}
img {
#apply w-16;
#media screen(md) {
#apply w-32;
}
}
Sometimes Tailwind may yelling about not supported nested syntax (depends on your PostCSS config or Preprocessor like Less) so you may change code a little
img {
#apply w-16;
}
#screen md {
img {
#apply w-32;
}
}
Finally nothing stops you from using variants within #apply if you wish
img {
#apply w-16 md:w-32;
}
I extended tailwind margin properties in the config file:
module.exports = {
theme: {
extend: {
'margin': {
'1/5': '20%',
'1/4': '25%',
'1/3': '33.333333%'
}
}
},
variants: {
margin: ['responsive']
},
plugins: []
}
And then applied it in my css with the following:
#screen xl {
.content-section.contract {
#apply ml-1/5;
}
}
#screen lg {
.content-section.contract {
#apply ml-1/4;
}
}
#screen md {
.content-section.contract {
#apply ml-1/3;
}
}
But instead of getting the margin-left: 20% on extra large screens and margin-left: 25% on large screens, styles gets overridden by the value for medium screens.
I tried adding !important in each styles in different screen sizes but it doesn't work as I expected. I believe this cannot be reproduce in a fiddle, since customize utilities is not supported in CDN version of tailwindcss.
According to the image, the order of the queries is responsible for this behavior.
This is because whenever multiple css rules of the same priority apply to an element the last one wins.
In this case here: whenever a screen size reaches the width required by the xl query, the queries for the smaller screens apply as well. Since the medium query is the last one, it overrides the styles of the queries that have been declared before.
A rule of thumb is to sort the queries from smallest to largest when using min-width (mobile first).
When using max-width (desktop first), it is the other way round.
The solution here is to either use max-width instead of min-width or change the order of your queries, so the smallest screen comes first and the largest last.
Example (reversed order):
#screen md {
.content-section.contract {
#apply ml-1/3;
}
}
#screen lg {
.content-section.contract {
#apply ml-1/4;
}
}
#screen xl {
.content-section.contract {
#apply ml-1/5;
}
}
They are using it throughout the documentation but I cannot find how to do add color to the header myself.
I assume there is a way to get a full bleed colored header without having to remove the padding from the card. mat-card-title-group also stays inside of the cards padding.
<mat-card>
<mat-card-title>Notes</mat-card-title>
<mat-card-content>
...
</mat-card-content>
</mat-card>
Is there another component I should be looking at instead?
ps: I found questions in regard to the original angular material for angular 1 but did not find anything for 2+.
A rendered mat-card-header looks like:
<mat-card-header _ngcontent-c22="" class="mat-card-header">
...
</mat-card-header>
So you can target it from its component with:
.mat-card-header {
background-color: red;
}
Or from its parent component with:
::ng-deep .mat-card-header {
background-color: red;
}
(You should avoid styling component from parents.)
Edit:
As you say in the comments, if you want to remove the padding you can add:
.mat-card {
padding: 0;
}
I have the follow html in Angular2.
<div class="col-xs-12 col-lg-8" >
<p style="font-size: 30px">
{{ teacher.personalInfo.name }}<br/>{{ teacher.personalInfo.surname }}
</p>
</div>
In my view, the text is aligned at the left (as I wanted). How can I say that when is for col-xs-12 it has to be centred?
Thank you.
The best approach for this would be to create a specific class for you container and only use media queries to modify the text position on mobile.
Here's the general idea following the BEM CSS naming convention:
<style type="text/css">
.thing {
... some styles
}
.thing__title {
text-align: center;
}
// tablets start at 768px width
#media (max-width: 767px) {
.thing {
... some mobile styles
}
.thing__title {
text-align: left;
}
}
</style>
<div class="thing col-xs-12 col-lg-8">
<p class="thing__title">... some text</p>
</div>
No need to increase the loading time of your site by adding jQuery to add styles to an element.
Bad idea to target modifier classes from component libraries. Especially your grid as you might removing that or the class name could be deprecated in later versions leaving your site vulnerable.
Can you use jquery?
$('.col-xs-12').css('text-align','center');
There is a good explanation of Bootstrap 3 and 4 Media Queries here at Bootstrap 3 breakpoints and media queries.
Bootstrap provides a great deal of flexibility to your project, but from minute details such as text justification between breakpoints, you will need to add a media query to your own CSS and apply the styles as desired.
So you might try something like this:
<div class="teacher-info col-xs-12 col-lg-8" >
<p class="ta-xs-left" style="font-size: 30px">
{{ teacher.personalInfo.name }}<br/>{{ teacher.personalInfo.surname }}
</p>
</div>
<style>
// Default to center the paragraph to center
.teacher-info p {
text-align:center;
}
// Large devices (desktops, 992px and up)
#media (min-width: 992px) {
// When the screen is larger than a tablet, left align the text
.ta-xs-left {
text-align:left;
}
}
</style>
Edit
In line with martinsoender's answer, I agree you shouldn't target modifier classes, and should add your own classes. This edit is to show how I would do that.
Essentially, I would add a class to the parent to denote what holds (teacher-info), then give the element I want to modify a class. In this case I create a class that looks similar to a bootstrap class. ta-xs-left ({text-align}-{Xtra-Small}-{Alignment}), then it can be reused wherever you need it.