When debugging traditional CSS I often use a red border to highlight a certain element on my page: border: 1px solid red.
In Tailwind it's quite cumbersome to type something like className="border-2 border-solid border-red" over and over again. I'd rather write something like className="debug". Is a shorthand like that possible in Tailwind?
Add a custom utility to your tailwind's CSS file.
Link to the docs.
You can use plain CSS or the #apply method.
CSS:
<div class="debug">Text</div>
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer utilities {
.debug {
border: 1px solid red;
}
}
Tailwind-play link
#apply:
<div class="debug">Text</div>
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer utilities {
.debug {
#apply border-[1px] border-red-500
}
}
Tailwind-play link
Related
I'm using tailwind CSS and would like to nest the entire tailwind CSS base/components/utilities code in a nested CSS class so that the code will be applied when used in children of the HTML elements inside that class
I know it's possible to use a prefix system instead, but I don't want to have to modify all html class attributes, so it's not an option for me.
main.css
.webapp {
#tailwind base;
#tailwind components;
#tailwind utilities;
}
I'm using the configuration from the official documentation https://tailwindcss.com/docs/using-with-preprocessors#nesting
postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
}
}
tailwind.config.js
module.exports = {
content: [
"../default/pages/*.html"
],
theme: {
extend: {},
},
plugins: [],
}
cmd
tailwindcss --postcss -i ./main.scss -o ./output.css --watch
The problem is that, in output.css, the nesting of the node responsive css class is handled properly but not the media queries
output.css sample
.webapp button,
.webapp input,
.webapp optgroup,
.webapp select,
.webapp textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
font-weight: inherit;
/* 1 */
line-height: inherit;
/* 1 */
color: inherit;
/* 1 */
margin: 0;
/* 2 */
padding: 0;
/* 3 */
}
#media (min-width: 1024px) {
.lg\:static {
position: static;
}
.lg\:bottom-0 {
bottom: 0px;
}
}
The nesting of .webapp class is only working outside the #media. It's the same for .hover/ and .focus/ . I would need it to include everything to make it work.
Thanks for your help !
In the globle.css I have the following,
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
body{
#apply bg-sky-900 text-sky-100;
}
}
it renders the color as would expect it to,
but if I use this #apply bg-gradient-to-b from-gray-400 via-gray-600 to-blue-800. Is it possible to set a gradient in this way? thanks for any pointer still really new to both next.js & tailwind
I want to remove the img rule from tailwind base, is there anyway to do that?
Tailwind base adds this:
img, video {
max-width: 100%;
height: auto;
}
I want to remove that rule. Overrideing it with initial will not get my expected result.
So unfortunately i cannot do:
img, video {
max-width: initial;
height: initial;
}
height: initial doesnt seems to be the same as having no height attribute at all. If i override height to initial the height will be the source of the image and height attributes on the <img height="200"> will not be respected.
Yes, it's
As the documentation says, you can override the base properties by using #layer base.
It's available from v1.9.0.
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
img, video {
max-width: initial;
height: initial;
}
}
I'm trying to change the style of the md-dialog.
in my main.scss i'm importing the prebuild pink-bluegrey theme...
then in my component I import the following -->
#import "#angular/material/dialog/dialog.scss";
$mat-dialog-padding: 0;
$mat-dialog-border-radius: 0.5rem;
$background: #ffffff;
#mixin mat-dialog-container {
padding: $mat-dialog-padding;
border-radius: $mat-dialog-border-radius;
background: $background;
}
#include mat-dialog-container;
The padding and border radius is correctly applied to the dialog window.
But the background is not working... also tried the !important statement.
I'm using this in a single component...
Is there also a change to apply those styles globally?
in chrome dev tools I see those applied style changes. The background gets overwritten by the pink-bluegrey theme..
hope anyone can help.
thanks
It is better practice to add a wrapper class around your dialog, and then add styling to the children. Have a look at this article for more information.
When you open your Angular dialog, you can add a panelClass
attribute, like this:
this.dialog.open(MyDialogComponent, {panelClass: 'my-panel'}).
then, in your css (e.g. in the root styles.css file), you can add the following:
.my-panel .mat-dialog-container {
overflow: hidden;
border-radius: 5px;
padding: 5px;
}
EDIT Warning
It is also possible to add the css to another file than the root styles.css, but then you have to use ::ng-deep in the css (e.g. ::ng-deep .my-panel{ // ... }). This is not advised, as ::ng-deep is deprecated in Angular
EDIT2 Good alternative
If you are using scss, then you can place your .my-panel-style in your mydialog.component.scss file, by using a #mixin, and #import the file in styles.scss. You can then use #include to load the defined mixin.
in your mydialog.component.scss file
#mixin myPanel(){
.my-panel .mat-dialog-container {
// css here
}
}
in your styles.scss
#import 'path/to/mydialog.component.scss' // you don't need the .scss suffix
#include myPanel();
I solved this problem by including this css block in the end of file material2-app-theme.scss
.mat-dialog-container {
overflow: hidden !important;
border-radius: 5px !important;
padding: 5px !important;
}
can you use css then change background in mat dilog, at i used color transparent
mat-dialog-container {
padding: 0px !important;
background: transparent !important;
}
If I have this
.base {
color:red;
}
.variation1 {
color:red;
border:1px solid black;
}
How can I change it to something like
.base {
color:red;
}
.variation1 {
import #.base
border:1px solid black;
}
in sass? I basically don't want to repeat the base stuff, I want to import its properties.
Does anyone know?
Thanks
Mixin
You can create a mixin to create reusable chunks of CSS. This helps you avoid repetitive code.
I would suggest a more semantic naming system compared to the sample below.
#mixin base {
color: red;
}
.base {
#include base;
}
.variation1 {
#include base;
border:1px solid black;
}
For more information about the mixin directive check out this article on Sitepoint.
Extend
CSS Tricks elaborates nicely on the extend feature that can also be used but it's got some quirks to it.
.base {
#include base;
}
.variation1 {
#extend .base;
border:1px solid black;
}
It expands all nested selectors as well
It cannot extend a nested selector
You can't extend inside a media query to a selector defined outside the media query
From CSS Tricks