I have a custom class set-up, I'm trying to add variants but seems the behaviour doesn't change from classic CSS.
#layer components {
#variants hover, focus {
.btn-primary {
background-color:blue;
}
}
.btn-primary{
#apply bg-primary rounded-sm border-4 border-primary rounded-sm text-white text-base py-2 px-4 capitalize transition-all;
}
}
If the variants is after the .btn-primary, then it applies the blue background like it's nothing.
Hover nor focus work.
Here what I've add in my tailwind config based on other posts I've seen :
variants: {
extend: {
backgroundColor: ['hover'],
}
}
You can simply use the hover: and focus: prefixes directly in your .btn-primary definition.
.btn-primary {
#apply bg-primary hover:bg-blue-700 focus:bg-blue-700 rounded-sm border-4 text-white text-base py-2 px-4 capitalize transition-all;
}
You also don't need to add the hover and focus variants to the backgroundColor property in the config as it's already enabled by default.
Related
My application is using UnoCSS, Nuxt 3 and my Style is using SCSS
One of my components has this style sheet
<style lang="scss">
.tag {
#apply shadow hover:shadow-lg hover:-translate-y-0.5 no-underline
capitalize border-b border-transparent rounded px-2 py-1 m-1 inline-block; //line is ignored
#apply bg-brand-supporting hover:border-gray-400 text-white;
}
</style>
Which works perfectly when running "nuxt dev", however, as soon as I deploy it, the rounding as well as padding is noticeable missing, while the hover shadow is working.
What is responsible for the multi-line #apply to work / to not work and how do I make it working?
After further tryouts it turns out only one #apply per CSS selector is allowed, but neither WebStorm complains, nor the build fails or anything.
As far as I remember, multiple #apply's worked with TailwindCSS and might be an issue with UnoCSS if I'm not mistaken.
Anyway, this works
.tag {
#apply shadow hover:shadow-lg hover:-translate-y-0.5 no-underline
capitalize border-b border-transparent rounded px-2 py-1 m-1 inline-block
bg-brand-supporting hover:border-gray-400 text-white;
}
It's my first time asking question on stack overflow and from what I'm feeling I'm missing something very small or don't understand the logic correctly. I show images by {#each} block and slice by adding and subtracting from variables: selected, prevSelected. From what I understood in svelte tutorial on transitions it should work (https://svelte.dev/tutorial/local-transitions), for some reason images just show up in a blink without transitions. I tried remaking the logic in the function, timeouts and restarting and none seemed working.
Please explain to me what I'am missing.
Sorry for little knowledge, picked up svelte as my first frontend framework to learn yesterday.
I'm using the latest sveltekit version.
Edit: I'm also using latest tailwind css.
<script>
import { slide,fade } from 'svelte/transition';
let images = [
{
Index: 0,
src: 'src/images/img2.jpeg',
alt: 'znaki ewakuacyjne',
class: 'show'
},
{
Index: 1,
src: 'src/images/img3.jpeg',
alt: 'buty',
class: ''
},
{
Index: 2,
src: 'src/images/img4.jpeg',
alt: 'znaki informacyjne',
class: ''
}
];
let selected = 1;
let prevSelected = 0;
let shown=true;
function handleClick() {
if (selected == 3) {
return;
}
prevSelected = selected;
selected += 1;
}
function handleBack() {
if (selected == 1) {
return;
}
prevSelected -= 1;
selected -= 1;
}
</script>
<h3 class="text-center font-semibold text-xl m-3">Galeria</h3>
<div class="image-gallery flex flex-col justify-center items-center">
{#if shown}
{#each images.slice(prevSelected, selected) as img}
<img
transition:fade
src={img.src}
alt={img.alt}
class="h-80 w-50 rounded-lg"
/>
{/each}
{/if}
<div class="flex flex-row gap-12">
<button
on:click={handleBack}
type="button"
class="text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-full text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900 m-3"
>⬅️</button
>
<button
on:click={handleClick}
type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 m-3"
>➡️</button
>
</div>
</div>
<style lang="scss">
</style>
You need to key the {#each} (see docs), e.g.
{#each images.slice(prevSelected, selected) as img (img)}
Otherwise the same component is reused and only its properties get changed.
Note that you may have to adjust the layout to make both images take the same place, otherwise the image that fades out will push away the one that fades in.
By the way, if you only ever show one image, you do not need an each at all, only {#key} and the index.
{#key selected}
<img
transition:fade
src={images[selected - 1].src}
alt={images[selected - 1].alt}
class="h-80 w-50 rounded-lg"
/>
{/key}
Could be simplified even further via a reactive statement that always resolves to images[selected - 1]. prevSelected is redundant and I would change the logic of selected to be 0-based instead of 1-based.
I'm trying to use Tailwindcss in a React project where I am replicating the Star Wars website mobile menu. However, the box shadow that I am adding to the hamburger icon segments is not showing up when the nav drawer is opened.
Link to sandbox: https://play.tailwindcss.com/upmiAWTcso
index.js:
const toggleDrawer = (event) => {
document.querySelector("#drawer").classList.toggle("left-[-100%]");
document.querySelector("#drawer").classList.toggle("left-0");
document.querySelector("#bar-1").classList.toggle("hidden");
document.querySelector("#bar-2").classList.toggle("active-2");
document.querySelector("#bar-3").classList.toggle("active-3");
};
<div
onClick={toggleDrawer}
className="h-full flex flex-col justify-center items-center space-y-[8px]"
>
<span
id="bar-1"
className="block h-[2px] w-[30px] border-zinc-500 border-l-[4px] border-r-[20px] rounded-full transition-all duration-300"
></span>
<span
id="bar-2"
className="block h-[2px] w-[30px] border-zinc-500 shadow-md border-l-[20px] border-r-[4px] rounded-full origin-bottom-right transition-all duration-300"
></span>
<span
id="bar-3"
className="block h-[2px] w-[30px] border-zinc-500 shadow-md border-l-[4px] border-r-[20px] rounded-full origin-bottom-left transition-all duration-300"
></span>
</div>;
global.css:
#layer components {
.active-2 {
#apply
rotate-45
-translate-x-2
translate-y-[530%]
!w-[34px]
!border-l-[25px]
!border-r-[5px]
!border-white
shadow-[#d50032];
}
.active-3 {
#apply
-rotate-45
translate-x-1
!w-[34px]
!border-l-[5px]
!border-r-[25px]
!border-white
shadow-[#106ae0] !important;
}
}
You only have a shadow color declared. You also need a shadow size like shadow-md.
Here's an example on Tailwind Play showing the difference https://play.tailwindcss.com/gxG7cir5EQ
You are applying !important the wrong way. To add !important to a tailwind class just add ! add the start like this:
#layer components {
.active-2 {
#apply
rotate-45
-translate-x-2
translate-y-[530%]
w-[34px]
border-l-[25px]
border-r-[5px]
border-white
!shadow-[#d50032];
}
.active-3 {
#apply
-rotate-45
translate-x-1
w-[34px]
border-l-[5px]
border-r-[25px]
border-white
!shadow-[#106ae0];
}
}
It's an browser support issue
The problem is an combination of border-radius and box-shadow if you open
https://play.tailwindcss.com/gxG7cir5EQ in opera it doesn't work but in Chrome for example it does. If you remove the rounded corners it shows the shadow.
I am trying to make tooltips for icons in my header, and right now I have made a component to make the icon and tooltip into one div, with tailwind styles in that
JSX Component:
const HeaderIcon = ({ icon, redirect = window.location.pathname.replace('/', ""), text = ""}:IconProps) => (
<div className="group relative flex items-center justify-center h-12 w-12 mt-2 mb-2 mx-5 cursor-pointer">
<button onClick={() => goto(redirect)} className="items-center inline-flex">{icon}</button>
<span className="group-hover:visible absolute rounded-md shadow-md text-white bg-gray-900 text-xs font-bold transition-all duration-100 p-2 text-center min-w-max invisible">
{text}
</span>
</div>
)
Here goto is a redirect function, icon is a JSX element from react-feather (icon library), redirect is a string telling the button where to redirect to, and text is the tooltip text. What tailwind classes should I use to position the tooltips under the icons, centered.
If there is any other things you may want then just ask and I will edit the code in.
you need to create a new variant group-hover for the plugin visibility in the Tailwind configuration:
// tailwind.config.js
module.exports = {
// ...
variants: {
extend: {
visibility: ['group-hover'],
}
},
}
When I hover over a navigation item, I want a span border color to be changed. The group-hover does nothing...
Is this just not implemented in Tailwindcss yet?
<a class="group px-4 py-2 hover:bg-white
hover:text-primary transition-colors duration-300
rounded-sm"
:href="route">
<span class="pb-1 border-b border-white group-hover:border-black">
<slot/>
</span>
</a>
I obviously can do this by writing css like this, but tailwind should be able to do this, right?
a:hover span {
border-color: black;
}
you need to enable group-hover in tailwind config file.
You can control whether group-hover variants are enabled for a utility in the variants section of your tailwind.config.js file:
module.exports = {
variants: {
textColor: ['responsive', 'hover', 'focus', 'group-hover'],
},
}