Stack Overflow
Stack Overflow

Questions tagged [tailwind-variants]

17 questions
2
votes
0 answers

Tailwind plugin to set styles for different breakpoints

There is a plugin in which the text styles are set. Is it possible to set a style for a combination of these styles at different breakpoints? /** @type {Plugin} */ const plugin = require('tailwindcss/plugin'); module.exports = plugin(function ({…
Lex2000
  • 155
  • 1
  • 1
  • 12
2
votes
0 answers

How do I enable the active variant in tailwindcss? (version 3.1)

I'm trying to convert the rest of my css into tailwindcss and I've been running into this blocker that prevents the active element from displaying as a different color.
2
votes
2 answers

first: and last: , even: and odd: don't work on "tailwindcss": "^3.1.6"

so I'm learning tailwind CSS but when I arrived at variants I got stuck so when I use first: and last: only first works and it gets applied to all my list elements, it is supposed to work only to the first one, its the same for even and odd, please…
kabylecoder
  • 27
  • 1
  • 4
2
votes
1 answer

Tailwind rn installed but not styling views

This is my second go around installing tailwind rn for a project and I simply can't get it to work. I ran npm install tailwind-rn followed by npx setup-tailwind-rn and I'm running it in development mode after changing the tailwind.config.js to scan…
Maksim Tonyushkin
  • 95
  • 1
  • 10
1
vote
2 answers

Extending Tailwind "modes" alongside dark mode

What is the best approach for adding your own themes for Tailwind in the same manner as dark mode? The dark class is included within the HTML tag to signify that the page is now in dark mode, and we use the dark: selector when defining classes to…
Ross
  • 13
  • 3
1
vote
1 answer

How can I use the Tailwind hover media query with group-hover?

I've tried appending "group-hover" to the P tag to get the red text to hover on devices that allow for hover states but with no success. The basic markup for my problem looks like this...

Darcy Paterson
  • 95
  • 2
  • 7
1
vote
1 answer

How can I add spacing in file upload button

I wanted to add spacing between the Choose Files button and the text on right side. How can I do so by tailwind CSS. I had added the code below .
MagnusEffect
  • 3,363
  • 1
  • 16
  • 41
0
votes
1 answer

Adding custom named colors generated by Tailwind

Is there a way to assign custom colors in a way that allows Tailwind to generate meaningful semantic names? For example, I'd like to have a collection of success colors that can be applied like this: bg-success => Tailwind generates #F6FFED behind…
poweratom
  • 2,270
  • 23
  • 25
0
votes
0 answers

How to set border bottom except the bottom sets using react, and css

I have to set border to every row except last row like one on image below In this image, there are 8 cards i have arranged on grid, but it also needs to be responsive and the number of cards can vary depends on the API, Below is the code I have…
RANTO BERK
  • 31
  • 1
  • 6
0
votes
0 answers

Tailwind Variants with container queries breakpoints

I was reading the Tailwind Variants documentations and have an doubt. at "Responsive variants" we have this example: import { tv } from "tailwind-variants"; const button = tv({ base: "font-semibold text-white py-1 px-3 rounded-full…
Yuri da Paz Simonin
  • 1
  • 1
0
votes
0 answers

In my next js app, I am using tailwind css for styling, but when I am writing custom properties in tailwind css like - w-[220px], h-[120px]

import React from 'react' const ShopBy = (props) => { return (
0
votes
1 answer

ReactNative with tailwindccss, className only accept one styling?

First of all this is my first question ever so i apologies if it wastes anyones time. Currently i've been trying to see if i can use tailwind with reactNative for one of my school projects. I've run into a problem postsetup (i assume postsetup). The…
Enokkio
  • 1
  • 1
0
votes
1 answer

my tailwind media query utility is dysfunctional

Using Tailwind I set an element to apply the 'flex-col' utility by default but 'flex-row' utility on small devices, so 'sm:flex-row'. But it applies the sm flex utility by default instead of the 'flex-col' I'd set. Please, what can I do to fix this.
Liti
  • 21
  • 5
0
votes
1 answer

calc(100vh - 44px) not working in TailwindCSS 3

I tried all of these:
      But when tailwind compiles, I still see…
سعيد
  • 1,547
  • 1
  • 14
  • 32
0
votes
1 answer

Tailwind Object-fit doesn't function

When trying to use object-contain in tailwind I get Warning: Failed prop type: Invalid props.style key `object-fit` supplied to `Image`. This is my code
noone
  • 123
  • 1
  • 6
1
2