I don't think this question has been answered.
min-h-1/2 and the rest variants are working correctly, but how to set lets say min-height-30px?
I did not see the answer in the docs.
You need to define a custom scale property in the minHeight section of your tailwind.config.js file.
tailwind.config.js
minHeight: {
'30px': '30px',
}
sample html:
<div class="min-h-30px bg-blue-600">min-h-30px</div>
check working demo
Related
In Tailwind Officail docs, there are lots of width utilities we can use.
However, the maximum fixed width I can specify is w-96, which is width: 24rem; (384px)
I've noticed a weird class called w-px, at first glance, I thought I can do w-600px, but it's not working, it is exactly 1px.
I am currently migrating my old project to Tailwind CSS, so there are going to have lots of weird widths I need to specify, but Tailwind CSS doesn't provide them by default.
If I can just do w-600px would be nice, or am I missing any other better approach?
If you configure your Tailwind install to run in just-in-time mode, and you are running tailwind 2.1+, you can use their arbitrary value support. https://tailwindcss.com/docs/just-in-time-mode
For example, I needed a width of 600px, here is how I specified it:
h-[600px]
Can you please check the below code? Hope it will work for you.
#1 You need to add the below code in tailwind.config.js
module.exports = {
theme: {
extend: {
width: {
'600': '600px',
}
}
}
}
#2 After that you can use w-600 in your HTML file like below.
<div class="w-600">...</div>
You were just missing the brackets [ ]. Try this:
w-[600px]
Take a look on the section "Arbitrary values" that most part of Tailwind classes have. There you can see how you can set any value you want.
Arbitrary values for with https://tailwindcss.com/docs/width#arbitrary-values
If you need to use a one-off width value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
<div class="w-[600px]">
<!-- ... -->
</div>
I was trying to set margin of an div element at specific breakpoints by adding a {screen}: prefix but it won't work.
What I tried is below;
<div className={'flex justify-center'}>
<div className={'w-full my-8 sm:my-20 md:my-48'}>
<div {...props}>
{children}
</div>
</div>
</div>
Inspecting mode, I could identify that only my-8 class works.
All classes of Tailwind work well and flex for responsive works as well, but the margin(padding) for responsive doesn't work.
I use Next.js and Tailwind CSS.
Sorry, but I figured it out by myself.
It's because of tailwind config.
Since it's not the project from scratch, I had no chance to check the config.
So I figured it out by modifying margin variant to:
// tailwind.config.js
module.exports = {
variants: {
// ...
- margin: ['hover'],
+ margin: ['responsive', 'hover'],
}
}
reference:
https://tailwindcss.com/docs/margin#responsive-and-pseudo-class-variants
UPDATE 11/2021
In Nov, 2021, Tailwind released version 3.0 and it has some breaking changes.
One of the changes, you can remove variants section from your tailwind.config.js file.
Reference: https://tailwindcss.com/docs/upgrade-guide#remove-variant-configuration
Is there a way to disable Tailwind's Preflight on a specific div or component? For example a WYSIWYG editor, or wanting to migrate gradually to Tailwind.
Search about 'unreset tailwind'.
https://www.swyx.io/tailwind-unreset/
download file unreset.scss from https://raw.githubusercontent.com/ixkaito/unreset-css/master/_unreset.scss
copy it over to your tailwind.scss and namespace it under an unreset class.
.unreset { // paste unreset.scss here! }
And then in your JSX, you can add that unreset class in:
div className="unreset" dangerouslySetInnerHTML={{ __html: post.contents }}
https://www.youtube.com/watch?v=iLEYtgBezhs
I believe the optimal method, if you're using it for basic markdown is to use the the #tailwind/typography package which will allow tags such as <h6> <b> etc...
run npm i #tailwindcss/typography
add require("#tailwindcss/typography") to your plugins in tailwind.config.js
add the className prose prose-lg
<div className="prose prose-lg" dangerouslySetInnerHTML={{ __html: markdownDesc }} />
Found this method in a article here:
https://tjaddison.com/blog/2020/08/updating-to-tailwind-typography-to-style-markdown-posts/
As far as i know it will always load the ui if can find similar classes. Some solution can be
Reducing its priority from other css, by putting it earlier from other css files in initial load.
you can config tailwind.config.js file in a way so that it only generates css that needed
wrapping css with extra identifier so that it can't collide with tailwind classes.
Another option is:
.element-selector {
all: revert;
}
all can set all properties of the element to the initial, inherit or revert value.
More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/all
I have a web app using angular 2 and angular materials. I am using a simple modal:
<h1 md-dialog-title *ngIf="data">{{data.title}}</h1>
<div md-dialog-content>What would you like to do?</div>
<div md-dialog-actions></div>
But when I run the app the modal's height is 100%. When I inspect with Chrome dev tools, it looks like Angular Materials/Angular 2 is injecting some classes that wrap around the md-dialog-content. Here is a snapshot:
Anyways, does anyone have any suggestion how to override the behavior so I can manually affect the size? Thanks.
Have you tried opening your dialog with specific height that you need? like:
let dialogRef = dialog.open(UserProfileComponent, {
height: '400px',
width: '600px',
});
Another way to force custom styles is to customize the theme itself. you can have a look at the guide here.
You can override material styling from your scss/css.
But due to view encapsulation, you need to use /deep/ selector that will allow you to get hold of the Material class added when the component is rendered. For example:
/deep/ .mat-tab-group.mat-primary .mat-ink-bar{
background-color: red;
}
I'm using Bootstrap's grid system, and I set the <iframe> width to 90%.
The problem is how can I set the height of <iframe> accrodingly?
For example, I want a 16:9 size. But I dont know how can I get the value of the width
Code may look like:
iframe
width: 90%
height: $(width)*9/16
man, that guy beat me to it, but he's right you could do it with JQuery
$(document).ready(function() {
$('iframe').height(function() {
return $(this).width()*(9/16);
});
});
This can be done with pure CSS, it's called intrinsic ratios. It requires doing math, but with SASS and Compass you can just say what you want and get the result! :D
You'll need a wrapper:
<div class=iframe-container>
<iframe></iframe>
</div>
SASS + Compass:
#import toolkit
.iframe-container
+intrinsic-ratio(16/9, 90%)
Demo: http://sassbin.com/gist/5983091/
As you can see, the awesome Toolkit Compass extension is used.
Use JQuery:
$('.iframe').height($('.iframe').width()*(9/16));
Make sure you have a js file though