I am new to TailwindCSS and still learning it. I got this normal css and want to convert to TailwinCSS. How do I convert this css code to TailwindCSS?
.status {padding: 5px;border-radius: 5px;&.Approved {color: green;background-color: rgba(0, 128, 0, 0.151);}&.Pending {color: goldenrod;background-color: rgba(189, 189, 3, 0.103);}
You can use Arbitrary variants to select child elements with specific class names.
<div class="rounded-[5px] p-[5px] [&_.Approved]:bg-green-200 [&_.Pending]:bg-slate-100 [&_.Pending]:text-yellow-400">
<div class="Approved"></div>
<div class="Pending"></div>
</div>
Reference - https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants
Related
I am building a website with PHP and MySQL which contains articles, and each of those articles can contain comments (rather like a typical blog). Each article page is like this
<?php
$blog_id = "1";
include("../includes/blog.php");
?>
and all the code is in blog.php.
The intention is that the comments on each page should have alternating background colours to make it clear when one comment finishes and another begins. I am using this CSS to achieve it
.comment:nth-child(2n+1){background-color:rgba(0,0,0,0.075)}
So it is my understanding that the first, third, etc comments should be light grey while second, fourth, etc will have a white background.
The first article I created has one comment at the bottom and it is grey as expected. The second article also has one comment but that has a white background. Using the code inspector in Chrome shows that it is not picking up the "nth-child" line of CSS. When I temporarily added a second dummy comment it had a grey background, so it seems to be applying to even elements instead of odd ones.
I have read the many similar questions on here but none of them got me to a solution. I have tried nth-child(odd) instead of nth-child(2n+1) but it made no difference. I even tried wrapping all the comments in another div and using this CSS instead, but that really messed things up by applying itself to nested paras within the comments.
.comment-wrapper :nth-child(2n+1){background-color:rgba(0,0,0,0.075)}
Any practical suggestions would be so appreciated. Thanks.
The nth-child pseudo selector actually acts on the child, not the parent.
This CSS selector looks for an element with class .comment that is an odd child:
.comment:nth-child(2n+1)
.comment:nth-child(2n+1) {
color: red;
}
<div class="comment">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<div class="comment">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
This CSS selector looks for an odd direct child of an element with class .comment:
.comment > :nth-child(2n+1)
.comment > :nth-child(2n+1) {
color: red;
}
<div class="comment">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<div class="comment">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
Your new rule would look something like this:
.comment > :nth-child(2n+1) {
background-color: rgba(0,0,0,0.075);
}
The reason for the > direct child combinator instead of just a space (descendant combinator) is so that we don't target nested elements inside the comments like you mentioned happened to you in one of your other attempts.
I recommend using odd in your selector for readability and the using the new CSS color syntax:
.comment > :nth-child(odd) {
background-color: rgb(0 0 0 / 0.075);
}
The solution in the end was to wrap the comments is a wrapper div and then use the ">" as suggested by Zach Jensz.
.comment-wrapper > :nth-child(odd){background-color:rgb(0 0 0 / 0.075)}
I have a form that contains an antD Select component.
<Select
name="SeasonId"
onChange={onSeasonChange}
placeholder="Choose Season"
>
// Select Options
</Select>
I want to be able to change the colour of the border (and box shadow) depending on a condition. I am able to change/override the css I need by adding the following into a separate CSS file:
.ant-select-selector:hover {
border-color: #1f9643e5 !important;
}
.ant-select-focused .ant-select-selector,
.ant-select-selector:focus,
.ant-select-selector:active,
.ant-select-open .ant-select-selector {
border-color: #1f9643e5 !important;
outline: 0 !important;
-webkit-box-shadow: 0 0 0 2px rgba(49, 139, 54, 0.342) !important;
box-shadow: 0 0 0 2px rgba(49, 139, 54, 0.342) !important;
}
This changes the styling to what I am after:#
However, I only want to apply this style-override to the Select if a certain condition is met in code (i.e. I have an isEditMode state bool). I may be missing something obvious but interested on hearing any suggestions.
Use a parent class name for your custom CSS code, and apply the class name to a parent element when the condition is true.
Example,
in your CSS file
.example.ant-select-selector:hover {
border-color: #1f9643e5 !important;
}
and in your JSX file,
<div className = {`${conditon ? 'example' :''}`} >
<Select />
</div>
I'm using a date input with bootstrap-datepicker to show a calendar for the user to pick a date. I'm trying to change the background and head's color, and it is not working
Here is my HTML code:
<div class="row mb-1">
<label class="col-lg-4 col-form-label col-form-label-sm"
for="time">End Date</label>
<div class="col-lg-8 form-group">
<input id="endDate" type="text" placeholder="To" class="form-
control" bsDatepicker
[bsConfig]="{ adaptivePosition: true, dateInputFormat:'YYYY-MM-D
D' }" [(ngModel)]="selectedEndDate"
(ngModelChange)="updateMyEndDate($event)" [ngModelOptions]="
{standalone: true}">
</div>
</div>
I tried to change the color using those lines of code but didn't work:
.bs-datepicker-head,
.bs-datepicker-head, .bs-datepicker button:active,
.bs-datepicker-body table td span.selected,
.bs-datepicker-body table td.selected span,
.bs-datepicker-body table td span[class*="select-"]:after,
.bs-datepicker-body table td[class*="select-"] span:after,
.bs-datepicker-body table td.active-week span:hover
{
background-color: rgb(35, 87, 185) !important;
}
.bs-datepicker-body table td.week span
{
color: #6e8f88 !important;
}
Any tips to make it work ?
Component styles normally apply only to the HTML in the component's own template.
Applying the ::ng-deep pseudo-class to any CSS rule completely disables view-encapsulation for that rule.
If you do the datepicker styles in the style.css for example, I often have to use the /deep/, ::ng-deep or >>> modifiers. In your case that would be ::ng-deep .bs-datepicker-head,
You might also look at theming bootstrap
"Many of Bootstrap’s various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets."
My html code:
<div class="row header_div">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 logo_grid">
<img src="img/logo.png" class="focus" >
</div>
</div>
My scss code:
div.header_div {
background-color: green;
div.logo_grid {
border: 2px solid blue;
img {
width: 50%;
padding: 10px
}
}
}
In Chrome version 38 just first 2 line from scss are recognized. I used 2 online scss compiler code (http://beautifytools.com/scss-compiler.php and https://www.sassmeister.com/) and i receive few line of css code. If i will replace my code with css generated code, all style will be recognized. My question is what is wrong in my code.
Browsers does not understand sass/scss/less, it can only understand css.
Sass/scss is just a CSS pre-processor which helps to reduce repetition with CSS and saves time.
So, whenever you are using sass/scss, you need to pre-compile it which will generate some css code and then use those css into your project.
You can use some software like 'koala', 'liveroad', etc to compile your scss file to generate a new css file.
I would like to add a divider between the columns in my grid.
The thing is, I can have between 1 and 4 columns. In the case I do only one, I don't want any divider.
Here is the current code I do have :
<div class='col-md-{$ NumberOfColumns $} my_class' data-ng-repeat='...'>
</div>
In the css, I can add something to my_class as :
.my_class {
border-left: 1px solid rgba(196, 187, 159, 0.63);
}
However, this border will appear even if I do have one column. Does bootstrap provide something to handle the divider more gently ?
You can use a CSS selector to "not" select elements that are the "only child" (i.e. single columns) like so:
selector:not(:only-child){}
Here is a snippet showing this code in action.
div{clear:both;}
.col{
width:100px;
background: yellow;
float:left;
margin:10px;
clear:none;
}
.col:not(:only-child){border-left:5px solid red;}
<div>
<div class="col">1 col</div>
</div>
<div>
<div class="col">1 col</div>
<div class="col">2 col</div>
</div>
You can see that the row with only one column does not get the left border, while the row with more than one column does get the left border.