Category "tailwind-css"

Why are some Tailwind classes not having effect in JetStream?

Some classes like text-green-500, rounded are having effect and the styling is updated. Ohter classes, like bg-black, don't have any effect on the styling. I am

Fade/transition tailwind class to something else over certain amount of time?

Is there a way to set bg-red-300 and fade/transition it to bg-transparent or different bg class over 2 seconds or do I need javascript for this? I want an eleme

Tailwind Flowbite modal issues on Livewire action

I'm having a real hard time using Flowbite's modals with Livewire. I have a Blade view restaurants.index rendering the x-layout Blade component, calls the <l

TailwindCSS 3 classes doesn't override previous classes

I am facing an issue which is mind-numbing in the world of CSS. TailwindCSS 3 classes just doesn't override previous classes. For example, there is this compone

Divider in divs with Tailwind

I have this now <div class="w-2/3"> <h2 class="text-2xl font-semibold">Ordered Items</h2> <table class="w-full border-collapse"> .....

How can I align vertically and horizontally my fields for each column?

How do I align my columns horizontally and vertically aligned in each column? Here the picture (whatI have/whatI want): export default function App() {

How in tailwindcss table hide column on small devices?

With tailwindcss 2 I want to hide some columns in table on small devices using sm:hidden: <table class="table-auto"> <thead class="bg-gray-700 bord

How to properly overflow a dropdown in tailwind?

I am trying to make the dropdown on the right overflow so that it is completely visible. I do not want to make the table bigger, I want the dropdown to be bigge

Using Nextjs Image component with different image sizes

I am trying to use the Next.js Image component with images that all have unique sizes. Their example states the image will stretch to the parent div width and h

Tailwind CSS - how to make a grid with two columns where the 1st column has 20% of the width and 2nd one 80% width?

From the official documentation, I am only able to come up with something like this: <div class="grid grid-cols-2 gap-3"> <div>1st col</div>

TypeError: compiler.plugin is not a function

I'm trying to use Tailwind v2 into an old project that uses .tpl files. Not an issue as we're migrating to the world of SPAs. What I'm doing should work regardl

Make tailwindcss modal dialog with scrolling content?

Basing on tailwindcss 2 modal example https://alpinetoolbox.com/examples/modal I make modal dialog with header/footer/ Content with many rows. I try to set cont

How do i get this container to align right?

I want to get these elements to move over to the right. The name is in the correct spot I just want the 4 elements to the right to move over with some slight pa

Installing Font Awesome with Tailwind in Laravel 8

I'm trying to add Font Awesome to newly installed Laravel 8 Jetstream with Inertia but receiving the following error Unknown error from PostCSS plugin. Your cur

Why aren't the Tailwind classes taking effect in my Vite React project?

I have a Vite React project that uses Tailwind via PostCSS. However, none of the classes are reflecting the the localhost. Below are the files in the project: p

Tailwind css backgroundImage doesn't work for me

all, I'm trying to make tailwinds backgroundImage solution work, and I found help for many other tailwindcss problems here or on github, but not for this. It's

Compile tailwindcss + typescript

I have a very simple app with some html, css, and ts files. I use swc to compile the typescript and copy over the html/css/assets. Now, I'm looking to add tailw

Tailwinds + Ant design : Button color is white but has own color wnen I hover it

I applied the tailwind CSS and Ant design with my Next.js project. I found the primary button got a white color. But it shows own primary button color when the

How to use Tailwind CSS together with SCSS in Laravel/Vue project?

I'm trying to install tailwind css from this guide into an existing laravel/vue project, which uses scss. install packages yarn add -D tailwindcss@latest postcs

Tailwind and Alpine.js flicker

How do I fix flickering on tailwind and alpine.js? Already added x-cloak as per alpine.js . But still not fixed. If the "default" state of an x-show on page lo