I currently have a weird problem using tailwindcss. The button below looks fine.
But when I click it does shape pill/rounded, instead its a rectangle below.
Someone knows how to make the active state shape same as the current one?
Here is my button code:
<button class="flex items-center justify-center focus:outline-none rounded-3xl
bg-green-200 text-gray-800 text-13 h-8 px-3">
Goto Button
</button>
I tried to add below code. But doesn't work
active:rounded-3xl
Device tested: iPhone X (using chrome browser (CTRL+SHFT+M))
Two possible solutions
1) This could be fix by disabling the preflight of tailwind but unfortunately it can cause major design problems for possible affected pages.
corePlugins: {
preflight: false,
}
2) Alternatively this could be solve by changing the cursor style. Add this class to the button cursor-auto.
<button class="cursor-auto flex items-center justify-center focus:outline-none rounded-3xl
bg-green-200 text-gray-800 text-13 h-8 px-3">
Goto Button
</button>
By default, active variant is not enabled for most of the plugins.
You need to add a small config change in tailwind.config.js
Extend the borderRadius plugin
//Add this change in tailwind.config.js
module.exports = {
variants: {
extend: {
borderRadius: ['active'],
}
}
}
Note:
By default, only some variants like focus, hover etc are enabled for the plugins(core-plugins only)
For more info, refer to
https://tailwindcss.com/docs/hover-focus-and-other-states
For borderRadius,
https://tailwindcss.com/docs/border-radius
Related
I'm using TailwindCSS and React to build out a menu component with buttons for each Menu Item.
I'm trying to set the button styles to show a purple left border whenever a button is in the focus state.
I've set the styling following the TailwindCSS docs but for some reason the UI is not responding. I've tested single properties and they all work but I can't get border specific properties to cooperate.
I have a Codesandbox for demonstration
import React from "react";
const MenuItem = ({ feature, idx }) => {
return (
<div className="ml-6 active:border-l-8 border-purple600" key={idx}>
<button className="focus:outline-none focus:border-l-6 focus:border-violet-600">
<h4 className="sticky top-0 text-black">{feature.featureCategory}</h4>
</button>
{feature.featureTypes.map((x, idx) => {
return (
<h6 className="pt-4 text-black ml-8" key={idx}>
{x.featureType}
</h6>
);
})}
</div>
);
};
export default MenuItem;
There are a couple of issues with the code you're using.
The TailWind package you're pulling in, via a CDN, is heavily out of date.
6 isn't a default option for border widths in TailWind therefore won't be available via CDN.
Ensure you're using a more current version of TailWind. Then, either add 6 as an option for border width to your config file or add it as a generated style.
Example: https://play.tailwindcss.com/DcVZLcEvqr
<script src="https://cdn.tailwindcss.com"></script>
<button class="focus:outline-none focus:border-l-[6px] focus:border-violet-600">Example Button</button>
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 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',
// ...
}
I installed React with tailwind from this: https://github.com/altafino/react-webpack-5-tailwind-2
I want to make a bg color like above in the picture. But I get no background-color its white. But Why?
this picture above is from tailwind.com first or second content
flex items-center space-x-4 p-6 md:px-10 md:py-6 bg-gradient-to-br rounded-b-xl leading-6 font-semibold text-white from-fuchsia-500 to-purple-600
fuchsia is not added to the colors by deafult. Checkout https://tailwindcss.com/docs/customizing-colors#color-palette-reference
// tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
// Build your palette here
fuchsia: colors.fuchsia,
}
}
Then, your gradient from-fuchsia-500 will work.
I have a laptop with 15.6'' screen and an external monitor with 23'' screen. I have a .vue component with this code:
<template>
<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500">
Hello
</div>
</template>
It shows this when I view it on laptop screen:
the teal color which corresponds to the xl screen size.
The div has the same teal color when I move it to the external monitor.
However the difference between the screen sizes is significant. If both the 15.5'' and 23'' are considered to be xl, how does one achieves better responsiveness?
For instance, I have a navbar with several navbar items. When I view it on the laptop screen, I need to make the padding px-2 small to get them all to fit:
However on the 23'' screen I have space to add more padding/margin, but can't do it because the changes would affect the laptop view as well:
This is the code of the NavbarItem.vue:
<template>
<li class="flex-1 md:flex-none md:mr-3
sm:text-xs md:text-xs lg:text-xs xl:text-xs
border rounded-full">
<a class="inline-block py-2 lg:px-5 xl:px-2
text-white no-underline" href="#">
{{text}}
</a>
</li>
</template>
<script>
export default {
props: ['text']
}
</script>
I tried adding lg:px-5 but it doesn't affect anything, unless I remove xl:px-2. When there's xl:px-2, the lg class is ignored.
xl has a min-width of 1280px. Check breakpoints.
Your 15.6" and 23" both screens falls under minimum of 1280px. I recommend adding additional screen.
// tailwind.config.js
module.exports = {
theme: {
screens: {
'xxl': {'min': '1920px'}, // this is to support your 23". Make sure your 15.6" screen is less than the min px value passed here
},
}
}
Then your class="inline-block py-2 lg:px-5 xl:px-2 xxl:px-4"
Give this a try & keep me posted in the comments below. Cheers!