Category "tailwind-css"

Tailwindcss version 3 classes not working on class attributes, but works on @apply for Angular 13

I'm unable to get Tailwindcss classes to appear on the inline "class" attribute. But if I @apply I through the ".scss" file and use that class on the inline "cl

How to integrate TailwindCSS in a Laravel package?

Usually, when I use Tailwind in Laravel, I would install it like so: $ npm install -D tailwindcss postcss autoprefixer $ npx tailwindcss init /* in the app.css

Getting the error "Nested CSS was detected, but CSS nesting has not been configured correctly" in React app?

I've been upgrading my CRA project to TailwindCSS 3, but now CSS nesting no longer works. Upon starting the server, the console spits out: (8:3) Nested CSS was

Tailwindcss 3 with Angular 13 - new styles don't show after ctrl+s livereaload

I am using Tailwindcss 3 with Angular 13. When I apply new class (for example bg-cyan-500) the style is not added into final .css file and the change is not vis

Nextjs config with postcss nesting doesn't work

I am using nextjs with tailwindcss and i am facing the difficulty in adding postcss-nesting to my nextjs app. Here is the configuration below for the same : nex

Problem with HTML reload with TailwindCSS and Gulp

I'm setting up a project with TailwindCSS. I'm trying to set up my automation with Gulp, but I'm running into an issue with the HTML reloading. Everything see

Blur background of text field (tailwind or plain css)

I want a text to have a blured white background. But im actually struggling with the blur effect. Everytime i try to use filter blur, the div gets blured but my

NextJs Tailwind build (purge) removes all styling

In my current NextJS project, I am using Tailwind as a CSS framework. When I run yarn dev, everything works fine, but whenever I run yarn build followed by a ya

How to specify height: fit-content with TailwindCSS?

Using TailwindCSS I'm trying to have a <div> fit to the height of its child, a <button>. My code is as follows: <form className="w-full flex h-96

Tailwind using Overflow in a layout

So I'm new to tailwind and i am creating a simple app/layout which has a Navbar, Image Feed and Sidebar component. So on the left side component it has a grid o

React heroicons icons are always black

I'm using @heroicons/react: ^1.0.5 and I'm trying to style the icons by applying another color. I'm using tailwindcss to manage my CSS. When I declare the follo

How to grow rotated text with tailwind css

I have this html example: <div class="h-screen"> <div class="absolute inset-0 -z-1 bg-black"></div> <div class="flex flex-col tex

Trying a responsive navbar in react and tailwind css but not working in another resolution

so im trying to create a responsive navbar with reactjs and tailwind css this is screen 1 in this size the screen is responsive here it is not responsive so I w

Flowbite Navbar Component is not working in React App

I used Navbar from Flowbite Tailwind CSS Component. But lately, Flowbite's Navbar dropdown menu is not working in my React app project. Is it not working for th

windicss classes doesn't work in Nuxt App

I got some issues with windicss. Classes don't apply on elements. I've tried to install an older version of windi and it still doesn't work. I've even tried to

When colors are set in tailwind.config.js the default tailwind colors won't work anymore

I am using Tailwind for a little Wordpress project I am creating. So I have set things up with webpack. This works absolutely fine. Tailwind does its tree shaki

how to change background of unchecked checkbox in Tailwind 3 if ussing accent-color

i have checkbox input with class="accent-gray-500" how can i change background color of "unchecked" state? Tried to add ie "bg-red-500" to input class, but no l

Is it possible to add multiple media queries at Tailwindcss plugin?

Here is my Tailwindcss version 3.0.24. I want to create a prefix css class like this: <div class="myTestVariant:text-red-600">hello world</div> and

Tailwind CSS class "w-full xl:w-3/6" doesn't work at xl breakpoint

I can't get this code to work on vuejs, class xl:w-3/6 doesn't override w-full. I tried replacing w-full with sm:w-full but when the window is smaller than sm t

How to implement background-position-x in tailwind?

I'm trying to make my background image responsive using tailwind. Can't find background-position-x in their documentation.