I have a div with a classes that look like this className={`${cardSelected && 'shadow-factors'} bg-white rounded-md cursor-pointer`}
Right now I'm setting up a print version of the page and I was wondering if it is possible to somehow remove this shadow-factors / box-shadow for the printed version with TailwindCSS toolset?
Yes Tailwind has a modifier print, you may look here
For example - shadow will disappear when printing
<div class="shadow-lg print:shadow-none">
Hello World
</div>
In order to make it work I had to add the following to the config:
// tailwind.config.js
module.exports = {
theme: {
extend: {
screens: {
'print': {'raw': 'print'},
// => #media print { ... }
}
}
}
}
With this being added to config any print: statements are working now, including print:shadow-none
Related
I'm new to Tailwind. I'm currently extending the list of components/utilities with a lot of similary purposed classes:
/* components.css / utilities.css (doesn't matter in this context) */
.pt-section {
#apply pt-16 lg:pt-20;
}
.mt-section {
#apply mt-16 lg:mt-20;
}
.-mt-section {
#apply -mt-16 lg:-mt-20;
}
.top-section {
#apply top-16 lg:top-20;
}
.-top-section {
#apply -top-16 lg:-top-20;
}
/*
Also: pb-section, mb-section, -mb-section bottom-section, -bottom-section, gap-section...
*/
The purpose of this utils is to be able to quickly make e.g. grid gap "same width as the section margin-bottom height" – pretty usable stuff.
I see that it would be much nicer to define a single responsive value in the config. I already do that for non-responsive constants describing body and header heights:
// tailwind.config.js
theme: {
extend: {
spacing: {
"13": "3.25rem",
"18": "4.5rem",
"header": "5rem",
"header-1": "calc(5rem - 1px)",
"body": "calc(100vh - 5rem)",
"sectionT": ??? should be responsive !!!
"sectionB": ??? should be responsive !!!
}
}
},
In this way TW would auto-derive all that I need. I would get mt-sectionT, gap-sectionB etc. classes automatically.
Is there a way to declare custom responsive (breakpoint-depending) values in the tailwind.config.js? Without writing a custom plugin, I mean.
It sounds like a common case, yet I can't find the answer in the docs (checked https://tailwindcss.com/docs/theme#customizing-the-default-theme and other pages) or on StackOverflow.
My code is working when fine when i am running for group hover on play.tailwindcss.com
But when i copy same code in my local file, group hover is not working there;
what should i include in my tailwind.config.css file to enable group hover in my case?
DEMO
CODE:
<div class="group">
Menu
<div class="hidden group-hover:block absolute bg-white shadow-md w-auto p-4">
option 1
option 1
option 1
option 1
</div>
The Playground uses JIT mode, so option 1 for you is enabling JIT mode.
Option 2 is to add the group-hover variant to your display utility as shown here https://tailwindcss.com/docs/display#variants
If you're using display variants anywhere else you'll need to add those as well, it might look something like this.
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
display: ['hover', 'focus', 'group-hover'],
}
}
}
I want a larger value for padding right than tailwind currently offers (pr-96 which is around 24rem) I’d like something around 40rem for my project.
Following documentation, I tried, but I cannot run npm run build without an error.
// tailwind.config.js
module.exports = {
theme: {
padding: {
xxl: 'padding-right: 40rem',
}
}
}
’’’
Error:the xx class does not exist, but xx does.
If I remove the code I added above, error goes away.
You don't need to specify the property padding-right in your creation of the xxl utility only the value and unit, this line:
xxl: 'padding-right: 40rem'
should be:
xxl: '40rem'
This will give you an xxl size of 40rem for all padding classes p-xxl, pr-xxl, pl-xxl, etc...
However, you should only use padding as a direct child of theme when you want to replace all padding utilities. If you wanted to just add this size to the existing padding sizes you should use extend inside theme like this:
// tailwind.config.js
module.exports = {
theme: {
extend: {
padding: {
xxl: '40rem'
}
}
}
}
Is there a way to apply spacified spacing units from tailwind.config.js to e.g. min-width other than by global config? That's as far I can see the only way but would mean to duplicate all (necessary) spacing units which is from my pov a potential error source as each relevant space must get duplicated then.
// Dummy code explaining what I want to achieve
.myButton{
#apply bg-red-100 w-auto;
min-width: #apply w-11 // Not working just for theoretical explanation
}
I'll provide every known option for me
1. Provide value inside config
module.exports = {
theme: {
extend: {
minWidth: {
11: '2.75rem'
}
}
}
}
This will generate min-w-11 class with min-width: 2.75rem. But what if for some reason Tailwind change 11 value to let say 197px, how can we sync it? Well every option has access to default theme options like
module.exports = {
theme: {
extend: {
minWidth: theme => ({
11: theme('spacing[11]')
})
}
}
}
This time min-w-11 will set min-width: 197px;. It referenced here
2. Use theme() directive
It is works inside CSS files like - no need to set config unless you need new value which is not present in default theme
.myButton{
#apply bg-red-100 w-auto;
min-width: theme('spacing[11]'); // 2.75rem
}
More information about theme() directive here
3. With a JIT mode enabled - requires Tailwind version 2.1 or higher
module.exports = {
mode: 'jit'
}
This on its own will generate CSS properties on the fly
<button class="myButton min-w-[2.75rem]">My Button</button>
<button class="myButton min-w-[197px]">My Button</button>
generated properties are
.min-w-\[2\.75rem\] {
min-width: 2.75rem;
}
.min-w-\[197px\] {
min-width: 197px;
}
You can read about JIT here
Please let me know if my answer is not what are you looking for as I may misunderstood question
min-w-[theme('spacing[11]')] also works, tested in Tailwind v3.
I want to just set the left value of a absolutely positioned div different from other divs. I tried the last: property of tailwind, but its not working.
Here's my code thet I tried
absolute z-10 -ml-4 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 -left-5 last:left-20"
I added these classes and only want the last mapped div to have different position
Sample code:
<div class='relative w-full h-72'>
{items.map((each, i ) => {
return (
<div key={i} class='absolute top-0 left-0 last:left-10'>{each}</div
)
})}
</div>
and the last div that is mapped should have different left value
Prior to v2.1 and JIT mode, you need to explicitly enable the last-child variant in your tailwind.config.js, as it's not enabled for any core plugins.
// tailwind.config.js
module.exports = {
// ...
variants: {
extend: {
inset: ['last']
}
}
}
Playground demo: https://play.tailwindcss.com/Wt6reZBsRY
From v2.1, when using Just-in-Time mode no extra configuration is required as all styles are generated on-demand.
// tailwind.config.js
module.exports = {
mode: 'jit',
// ...
}