I have this html:
<div class="container h-screen w-screen">
<div class="navBar h-7"></div>
<div class="content-container"></div>
</div>
I have set the .navBar's height to h-7. Now I want to set .content-container's height to 100vh-(h-7).
How can I use calc() to set it?
If you are using v2.x, add mode: 'jit' to your tailwind.config.js (no mode: 'jit' needed in tailwind v3)
module.exports = {
mode: 'jit',
....
};
And use like this: (Without space!)
class="w-[calc(100%+2rem)]"
It will produce:
.w-\[calc\(100\%\+2rem\)\] {
width: calc(100% + 2rem);
}
We can use the theme variables as well:
h-[calc(100%-theme(space.24))]
Tailwind v3 update
Now we can use an underscore _ instead of whitespaces:
Ref: Handling whitespace
<script src="https://cdn.tailwindcss.com"></script>
<div class="h-20 w-[calc(100%_-_10rem)] bg-yellow-200"></div>
theme()
Use the theme() function to access your Tailwind config values using dot notation.
This can be a useful alternative to #apply when you want to reference a value from your theme configuration for only part of a declaration:
.content-container {
height: calc(100vh - theme('spacing.7'));
}
Related
I have this html:
<div class="container h-screen w-screen">
<div class="navBar h-7"></div>
<div class="content-container"></div>
</div>
I have set the .navBar's height to h-7. Now I want to set .content-container's height to 100vh-(h-7).
How can I use calc() to set it?
If you are using v2.x, add mode: 'jit' to your tailwind.config.js (no mode: 'jit' needed in tailwind v3)
module.exports = {
mode: 'jit',
....
};
And use like this: (Without space!)
class="w-[calc(100%+2rem)]"
It will produce:
.w-\[calc\(100\%\+2rem\)\] {
width: calc(100% + 2rem);
}
We can use the theme variables as well:
h-[calc(100%-theme(space.24))]
Tailwind v3 update
Now we can use an underscore _ instead of whitespaces:
Ref: Handling whitespace
<script src="https://cdn.tailwindcss.com"></script>
<div class="h-20 w-[calc(100%_-_10rem)] bg-yellow-200"></div>
theme()
Use the theme() function to access your Tailwind config values using dot notation.
This can be a useful alternative to #apply when you want to reference a value from your theme configuration for only part of a declaration:
.content-container {
height: calc(100vh - theme('spacing.7'));
}
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 am creating a grid with tailwind and flexbox. Is it possible to create a 7 column grid? I know I can use width percentage but what would be the best practice here?
Actually the best solution would be to use CSS Grid instead Flexboxes to do this. Tailwind supports grid with up to 12 columns by default (docs).
<div class="grid grid-cols-7">
<div class="col-span-1">1</div>
<div class="col-span-3">2</div>
<div class="col-span-3">3</div>
</div>
If You really need to use flex:
By default there are classes w-1/2, w-1/3, w-1/12 etc but not w-1/7. We can set width for div manually in style="" or CSS, but the best practice would be to extend Tailwind configuration.
We need to add to tailwind.config.js new width classes (docs):
module.exports = {
theme: {
extend: {
width: {
+ '1/7': '14.2857143%',
+ '2/7': '28.5714286%',
+ '3/7': '42.8571429%',
+ '4/7': '57.1428571%',
+ '5/7': '71.4285714%',
+ '6/7': '85.7142857%',
}
}
}
}
Now we can use our x/7 columns:
<div class="flex">
<div class="w-1/7">1</div>
<div class="w-3/7">2</div>
<div class="w-3/7">3</div>
</div>
If You only want to get 7 columns with equal width, then we do not need to extend config and use width classes at all:
<div class="flex">
<div class="flex-1">1</div>
<!-- ... -->
<div class="flex-1">7</div>
</div>
There I have a PageHeader.vue file in my project which includes a stylesheet from an external PageHeader.scss-file:
<template>
<header>
<v-toolbar
app
flat
style="height: 300px;">
</v-toolbar>
<div id="logo"></div>
</header>
</template>
<script>
import './../assets/css/PageHeader.scss'
export default {
name: 'PageHeader'
}
</script>
If I do so everything goes well, but if I try to remove this line:
style="height: 300px;"
and instead use the style in my .scss-file like this:
v-toolbar {
height: 300px;
}
then my style from .scss-file does not apply. But if I prepend
v-toolbar
with the point symbol (treating it like a class but not like a tag name) it works good:
.v-toolbar {
height: 300px;
}
But I do have the v-toolbar TAG in my markup inside the .vue-file, NOT A DIV with "v-loobar" classname. Is there any way to work with vuetify custom tags the same way as with regular HTML tags?
The v-toolbar component renders to
<nav class="v-toolbar" ...></nav>
So you could style the nav element with something like nav.v-toolbar {...}.