I have a problem with my button here:
<template>
<button
class="active:scale-95 transform bg-blue-500 text-center transition sm:hover:bg-blue-600 active:bg-blue-700 text-white font-bold py-2 px-4 rounded"
:class="{ disabled }"
type="button"
>
<div class="p-1 w-full justify-evenly flex">
<slot></slot>
<div v-if="loading" class="lds-facebook">
<div></div>
<div></div>
<div></div>
</div>
</div>
</button>
</template>
As you can see in the example, my button has active:bg-blue-700 so my expectation is that whenever i click or click and hold the button, the background of my button changes. But it actually does nothing. Even the active:scale-95 worked. I also tried by removing active:scale-95, doesnt worked. I tried to add a variant in my config:
variants: {
extend: {
scale: ['active'],
background: ['active'],
},
},
Also no chance.
What am i doing wrong?
I use version #nuxtjs/tailwindcss 4.2.1
Well the issue was following: The variant name was wrong, change this
background: ['active']
to this:
backgroundColor: ['active']
Related
I am trying to apply an onhover effect for a viewport larger than 768px. Below 768px it should look like the elements are "always onhover".
Specifically, on desktop or larger devices in general, there should be a background in a box at onhover. This background should always be shown on mobile, i.e. <768px in my case.
What am I doing wrong?
Here are the snippets.
JSX-Snippet:
import { features } from "../constants"; import styles from "../style";
const FeatureCard = ({ icon, title, content, index }) => (
<div className=
{`
flex flex-row p-6 rounded-[20px]
ss:max-sm:feature-card-small
sm:feature-card
${index !== features.length - 1 ? "mb-6" : "mb-0"}
`}
>
<div className={`
w-[64px]
h-[64px]
rounded-full
${styles.flexCenter}
bg-dimBlue`
}>
<img
src={icon}
alt="star"
className="
w-[50%]
h-[50%]
object-contain"
/>
</div>
<div className="flex-1 flex flex-col ml-3">
<h4 className="
font-poppins
font-semibold
text-white
text-[18px]
leading-[23.4px]
mb-1">
{title}
</h4>
<p className="
font-poppins
font-normal
text-dimWhite
text-[16px]
leading-[24px]
">
{content}
</p>
);
export default FeatureCard;
CSS-Snippet:
.feature-card:hover { background: var(--black-gradient); box-shadow: var(--card-shadow); }
.feature-card-small { background: var(--black-gradient); box-shadow: var(--card-shadow); }
simply apply feature-card as class without viewport specification works as expected; onhover --> background changes
different viewport-specifications (sm:..., ss:max-sm and sm:) and creation of different CSS classes (so there can be no overlap for sure) did not work
sorry if the code block looks like a mess here on stackoverflow. my first post, still learning.
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 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'],
}
},
}
I am using Tailwind CSS with Next.js, and want to show progress bar in below url.
https://www.tailwind-kit.com/components/progress
The code is below:
<div>
<div class="bg-white rounded-lg w-72 shadow block p-4 m-auto">
<div class="w-full h-2 bg-gray-400 rounded-full mt-3">
<div class="w-3/4 h-full text-center text-xs text-white bg-green-500 rounded-full">
</div>
</div>
</div>
</div>
However, If I check browser, the bar is not displayed and the height of the div element is 0.
I checked in Chrome and Safari, and the result was the same in both.
I want to know how to show the empty div element in browser.
--Update:
I have solved the above problem by removing the height customize from tailwind.config.js.
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
// removed this
height: {
main: '681px'
},
},
variants: {
extend: {},
},
plugins: [],
}
However, I don't know why the height customize caused this problem, does anyone know about it?
you could use grow Property:
<div class="grow w-3/4 h-full ....">
Have a look at my current web page, developed using tailwindcss page below:
What now I want to achieve is to have a .PNG background instead of that blank green background in the center.
I am new to Tailwind, so I used to simply set a background: url(..) in a css file for particular div class. Looking at TailwindCSS documentation here about backround-image,I can't see similar functionalities there.
Below is snippet of my code for that particular div:
<!-- Content: background image url should be in this div, right?-->
<div class="flex-1 pt-2 text-2xl font-bold mt-2 mb-2 bg-green-50 rounded-br-3xl">
<div>
<!--Search field -->
<div class="w-full">
<form class="rounded">
<div class="px-5">
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Ask me anything (Press CTRL+K to focus)")>
</div>
</form>
</div>
<!-- content -->
<div class="px-5 pt-8">Course content here</div>
</div>
</div>
You can add your own background images by editing the theme.backgroundImage section of your tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: theme => ({
'hero-pattern': "url('/img/hero-pattern.svg')",
'footer-texture': "url('/img/footer-texture.png')",
})
}
}
}
so hero-pattern will become bg-hero-pattern for example.
Now that Tailwind 3 is out, you can use one-off background images like this, without having to use inline styles or extend tailwind:
<div class="bg-[url('/img/background.png')]">
<!-- ... -->
</div>
You can learn more about using arbitrary values in Tailwind 3 in the docs.