Category "tailwind-css"

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

React-native-rn tailwind doesn't generate tailwind.json

I followed all the steps of installing react-native-rn. Everything worked fine at first, but when I moved input.cssto src/css/input.css,it just generates src/cs

Error while using flowbite with nextJS and typescript

I installed tailwind and flowbite to a NextJS project. As I did import "flowbite" in _app.tsx, I get the following error. ReferenceError: document is not defin

Tailwind CSS classes is not working in my project?

Here is my HTML link https://play.tailwindcss.com/fbB4GCL0ht VS Code setup pictures Tailwind.Config.js All files warn - No utility classes were detected in your

Make div align to bottom of column in card tailwind css

As the title states, I am trying to get a div within a parent div to align across columns using Tailwind CSS. However, they are not aligning due to different im

Tailwind custom background-image not working in production

In my CRA project I've added my own background images by editing the theme.backgroundImage section of my tailwind.config.js file. The images show up locally bu

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