Category "tailwind-css"

React and Tailwind CSS: dynamically generated classes are not being applied

I'm just learning React and Tailwind CSS and had a strange experience with CSS grid using Tailwind classes. I've made the buttons for a calculator, with the las

Types for tailwind

I am using tailwind.config.js in order to extend some colors: const theme = { mode: 'jit', content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], darkMo

Types for tailwind

I am using tailwind.config.js in order to extend some colors: const theme = { mode: 'jit', content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], darkMo

How to toggle to dark mode in Vue JS and Tailwind CSS

I want to toggle to dark mode in Vue JS and Tailwind CSS with Dark class in tailwind, but I don't have idea what I should do. I code a little and I want to try

Rails 7 and Tailwind dynamic classes

I have a Rails 7 app with tailwind where I'm doing something like this: @list = [{name: "Some", width: "3/12"}, {name: "other", width: "6/12"}] # In the view &

Tailwind class is not working after installed

I try to use CSS, im just install the tailwindcss with npm, and then i build the css and provide the output.css. But, when i use the bg-black class in button fo

My TailWind CSS Intellisense plugin just isn't working on my VSCode

So the description of the plugin is that it'll display suggestions of classes when am working on the markup, but it doesn't. I've reloaded the plugin countless

purgecss can't recognize conditional classes

So I'm using TailwindCSS for a WP theme I'm developing. I ran into an issue in creating the production grade theme files because, from how I understand the pr

Use both Tailwind and SCSS with cssbundling-rails

In the Rails 6 project I'm working on, we're looking upgrade from webpacker to cssbundling-rails and jsbundling-rails. We currently use Tailwind with SCSS, but

Tailwind: How to make @apply work for custom CSS class?

Say you have a basic project setup: @tailwind base; @tailwind components; @tailwind utilities; And you want to add a basic utility that uses CSS that's not par

tailwind css Classes are not included if they are type in a string vue

i'm use TailwindCss with vue if i write component he has a prop like color: <script setup> defineProps({ color: String // give me like: green }) </

How to change the default screen background color of all the pages in React JS(Next JS) using tailwind CSS

I am trying to change the default screen background colour of all the pages of the web application. Technologies I used: React JS Next JS Tailwind CSS I want to

custom button component + tailwind styles being purged

I want to create a button component like this: function Button ({ color }) { return ( <button className={`hover:bg-${color}-300 bg-${color}

Tailwind is not working on a new laravel project

I just installed a clean Laravel project with the Jetstream starter kit, so it also installed Tailwind CSS. I then tried to use the sample code from Tailwind bu

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() {