Category "tailwind-css"

How to use dynamic tailwind classes with JS switch statement and pass them correctly in Vue?

I am a beginner to Vue JS and I'm trying to create a function for assigning corresponding colours to the order statuses. I would like to use switch-statement to

React Native Components Override styles "leaking"

I'm trying to build my own component library specific to my React Native app using the Atomic Design Methodology, so I have small components like Paragraph, Tit

How to make a triangle shape with Tailwind?

<div class=""> <div class="w-16 h-16 border-b-30 border-l-30 border-solid border-black"> <div class="h-16 w-1

How to access all the direct children of a div in tailwindcss?

I have this html: <div class="section"> <div class="header">header</div> <div class="content"> <div>sub contents 1<

The background becomes black when I add DaisyUI in my SvelteJS+Tailwindcss Project

I was configuring with my SvelteJS and Tailwindcss project with DaisyUI. But every time I add DaisyUI to a Project the background color becomes black. Maybe it'

TailwindCSS - Add many properties after media queries

I am learning tailwind these last days and I was wondering if there was any ways to "group" many properties after a media queries or a "hover:" for example. &l

Can I create a Masonry layout using Tailwind CSS utility classes? [duplicate]

I'm trying to create a Masonry layout using Tailwind CSS utility classes (not plain CSS), but going through all the official Tailwind document

How to write a Tailwind class plugin that takes a palette colour as an optional parameter

I have this style: box-shadow: 0 0 0 100px white inset; But I don't want white hard-coded in - I want to make a Tailwind plugin in my tailwind.config.js called

Tailwind height transition not working on h-min, h-fit, h-max, and h-auto

So I like to make transition whenever the element change it's height. It works on h-10, h-20, etc. But it doesnt work on h-min, h-max, h-auto. ‎‎‎&l

Tailwind css styles not showing on my browser

This is the first time I'm working with tailwind css , after I did the required installations , and linked my styles.css file to the html file ,it only removed

Tailwind.css — How to implement the last-child using Tailwind?

I have tried without success to implement the prefix last: as shown in the Tailwind.css documentation. Can anyone point out what I am doing wrong? I cannot make

Enabling scroll using Tailwindcss

I am using Tailwindcss and trying to achieve a design, in which there is a scroller in middle section. However, the scroller is disabled and it's full height i

Command removing tailwindcss in the input.css

When I run: npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch My output.css gets mostly deleted, and only contains a handful of tailwind css, see

Storybook-tailwind. How should I add tailwind to storybook

I want to add tailwind to storybook. So that Stories will render just like it will render on web. I used create-react-app project-name --template typescript to

Build the complete Tailwind 3 app.css file using Laravel Mix in Docker container

I have set up Laravel in a Docker container and launched it using Laravel Sail. I'm using Laravel mix with tailwind version 3 to include my CSS. The issue is th

Tailwind V3 causing TypeError: Cannot read property '500' of undefined

I recently tried to upgrade my project to tailwind css and I'm getting this error this is my tailwind config module.exports = { mode: "jit", purge

Tailwind-CSS doesn't apply flex/block after applying .hidden to the element

I want my div to be hidden on small screens and visible on bigger screens starting from md: But seems like .hidden has a higher priority. Or it just messing up

Build rows before columns with grid

I have a grid with a variable number of elements, but it should always have 3 columns: <div class="grid grid-cols-3"> <span>1</span> <s

Styling issues in monorepo with Turborepo, SvelteKit and Tailwind

I’ve created a monorepo with Turborepo that contains 2 SvelteKit apps and 2 packages: a component library (which is also based on SvelteKit) and a configu

tailwind doesn't want to show font

here's my question. for learning purposes i am currently working on a website with tailwind installed with the CLI method. i downloaded a font and applied it in