Questions tagged [tailwind-css]

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Filter by
Sorted by
Tagged with
-1 votes
0 answers
14 views

Tailwind and bg image, is this framework bugged or it's me?

i have some problems changhing the background image on nextjs with tailwind and i have to say that i guess tailwind is bugged, i have following the docs and the tutorial on the web, making a new ...
Pepitos333's user avatar
0 votes
0 answers
19 views

problem while rendering dynamic class using tailwind and react

I am rendering a different options of color using dynamic colors in tailwind here is the code: import React from "react"; const Tab1: React.FC = () => { const colorOptions = [ [&...
krish's user avatar
  • 47
0 votes
0 answers
6 views

Tailwind on my next.js project works only after refresh on some pages while works fine on other

I am working on a Next.js project with other contributor, when i am on my pages, my Tailwind works fine but when I move to their pages and revert back to mine the tailwind breaks down and works ...
Shreya Shukla's user avatar
-1 votes
0 answers
10 views

Intergate tailwind css with WordPress

As a WordPress developer, I've successfully converted HTML to WordPress in the past. However, I now have a new HTML project that incorporates Tailwind CSS. Can you guide me on seamlessly integrating ...
Rasel Bisswas's user avatar
0 votes
1 answer
27 views

Tailwind CSS doesn't apply styles when setup with React and Vite

I setup a React project with Vite. I also installed TailwindCSS successfully with no errors in the terminal. I followed all documentation instructions but on trying to use the Tailwind classes from ...
Hi - P's user avatar
  • 45
0 votes
0 answers
22 views

Using Tailwind css with single-spa applications

I have a collection of vite + react projects and am attempting to create a collection of single-spa Micro-frontend projects. I got the UI to be propagated as a single-spa and am currently aiming to ...
Nihir Singh's user avatar
0 votes
0 answers
11 views

Tailwind css is not working consistently, properly in vs code (it behaves different than tailwind play)

Hi I am a beginner just trying to learn tailwindcss. IN vscode it looks like it is styling things (like adding the purple color) but it is not styling things, for instance making the font bigger or ...
jsewb's user avatar
  • 1
0 votes
0 answers
7 views

Input field using tailwind 2.2.16 in django form

I am using tailwind 2.2.16 in my Django project. I want to style the form, but the input fields are misbehaving and a weird looking border is encircling them. Please help me create a decent looking ...
Prateek Kumar's user avatar
0 votes
2 answers
35 views

Why is adding style to an element through a javascript variable in tailwind not applied to the element?

Focus on these two buttons "SHOP NOW" and "LATEST COLLECTION", I added a background color to the first button with a javascript variable on the other hand second button's ...
Malhar Soomro's user avatar
0 votes
0 answers
16 views

Detecting Mega Menu Open/Close Events in Flowbite (via CDN) [closed]

I'm using Flowbite via CDN, and I've successfully added a mega-menu element to my web page. Now, I need to implement functionality to detect when the mega-menu is opened or closed for implement some ...
Anemoiaa's user avatar
0 votes
0 answers
18 views

Tailwind CSS Sliding Animation is not working

Even though the animation property is placed, the animation doesn't work. The sidebar simply pops up instead of sliding from right off screen to left. import React from 'react' import {MdClose} from '...
andrea siano's user avatar
0 votes
0 answers
19 views

How to integrate Tailwind CSS to Laravel10?

I am going to integrate Tailwind CSS into Laravel. I created Laravel project using follow command. composer create-project laravel/laravel example-app But I am not sure how to install laravel ...
Blue Water's user avatar
0 votes
0 answers
11 views

Typescript not recognized in VSCode

I'm working on a new NextJS project w/ Typescript and Tailwind CSS. I'm working on Mac Ventura 13.3.1. I am importing dummy used data via the jsonplaceholder API. In my users/page.tsx component, I am ...
Misha Krul's user avatar
0 votes
0 answers
38 views

unrelated if statement removes value

i have an issue with the first if statement in the class. it handles if the popup(livewire) is shown or not. it also ONLY removes the amount that is shown with $details->amount later in the code. ...
Kenai's user avatar
  • 1
0 votes
0 answers
27 views

How to Prefix Tailwind CSS Classes with Dynamic Brand Names in Next.js

I am working on a Next.js project that uses Tailwind CSS for styling. This is not a typical single-site project; instead, it is a branded site where the brand can change. At build time, I supply the ...
Ersin Basaran's user avatar
0 votes
0 answers
31 views

Sidebar sliding transition's issue

I am using react and tailwind css. I am trying to apply a transition to this settings sidebar. When I click on the icon the sidebar opens but the transition doesn't work. This is the conditional I ...
andrea siano's user avatar
0 votes
1 answer
12 views

vscode won't wrap html class attribute contents (class list) to multiple lines

Consider this simple html with single element that has a lot of classes: [...] <body> <article> <div class="my-class my-12 pr-8 text-blue-800 bg-blue-500 hover:bg:blue:...
yomajo's user avatar
  • 138
0 votes
0 answers
42 views

How to make the size of a grid element dynamic in CSS?

I have a question for sizes in CSS. I have a Figma files with a grid, I want to keep the same size of this Figma files. For example on a 1728px width screen I have these sizes: the grid is 1708x1487, ...
Polikuc's user avatar
  • 41
0 votes
0 answers
10 views

How can we prevent the react-type-animation from animating the entire section towards left while using NextJs and Tailwind?

While making my header section I used react-type-animation to animate the intro text, I have made a grid and two column inside the grid col-span-7 and col-span-5 , where I am using col-span-7 for my ...
Rafia Zafar's user avatar
0 votes
0 answers
10 views

First npm package - tailwind css issue conflict between package and project

I have created my first npm package that utilises tailwind as a peer dependency. The issue I am having is that when I utilise my package in another project with tailwind, it is causing some overriding ...
Chris's user avatar
  • 76
0 votes
0 answers
15 views

How to apply opacity to a background image without affecting child elements in Tailwind CSS? [duplicate]

I have a form with background image, but i dont know how to change its opacity. <template> <div class="bg- flex h-screen w-screen flex-col items-center bg-[url('../assets/img/...
suer231232131133's user avatar
0 votes
1 answer
21 views

Tailwind setup not working on vercel-tuborepo with react

I was trying to setup tailwind css with my react monorepo created using vercel-turborepo I simply used the example from vercel to setup monorepo with create-react-app then i tried copying the same ...
8ANiMER8's user avatar
-1 votes
0 answers
12 views

Login Form height control in Tailwind CSS

The problem is height control of sign up form that I make by using Tailwind CSS. The sign up form is already done, after the section I use div for the login page. For the widht control I was use [max-...
PO RA N's user avatar
0 votes
0 answers
13 views

Does Advance Custom Fields work in Tailpress Theme?

I'm currently building a new website for a client. Normally we always use the understrap theme internally to implement websites with ACF. Since I find the development of Tailwind better than that of ...
marlxnw's user avatar
  • 41
0 votes
2 answers
43 views

Tailwindcss - Pagination shows above the table

The problem I'm encountering is that the pagination is appearing above the table, whereas my expectation is for it to be displayed after the table. Ideally, when I add multiple rows, the pagination ...
R. Elavarasan's user avatar
0 votes
1 answer
24 views

Padding is not apply for name column in table cell - Tailwindcss

I applied p-4 on the <th> column for the name but In the output, the name column is added into the next column. refer to the image: How can this be fixed? Based on the name length, it should ...
R. Elavarasan's user avatar
-2 votes
0 answers
27 views

Next.js: Trouble using Tailwind CSS

I am using Tailwind CSS, it was working fine, but suddenly i got this error message. I tried rolling back to a previous state but it is still not working: ready - started server on 0.0.0.0:3000, url: ...
Maneesh Dindhoria's user avatar
0 votes
1 answer
36 views

scroll smooth doesn't work in laptop but work in mobile phone browser in nextjs website

I'm facing an issue with implementing smooth scrolling in my Next.js application using Tailwind CSS. The smooth scrolling works as expected on mobile browsers, but it doesn't seem to apply on desktop ...
user avatar
2 votes
1 answer
50 views

How to use postcss-import with tailwindcss-rails and importmaps

I started a new rails project and am attempting to get tailwind running on it. I'd like to be able to have the tailwind css files separated for organizational reasons. Relevant gems in my Gemfile: gem ...
nzifnab's user avatar
  • 16k
-4 votes
0 answers
27 views

Why doesn't my logo image appear in Firefox as it does in Chrome? [closed]

I'm having trouble with a logo image appearing in firefox. In Chrome it works perfectly fine, but when I open it in Firefox or Edge the image doesn't appear, only the alt attribute does. I'm using ...
Shawle's user avatar
  • 1
0 votes
1 answer
17 views

Horizontal scrollbar / overflow-x on Chrome is triggered even though elements is set to w-screen (100vw;) (Tailwind, NextJS 13.4+)

Took a little while to track down the root of this issue in a bigger project -- hopefully this Question and Answer will help somebody else. This is the scenario -- you have a NextJS/Tailwind project, ...
Octo Palm Tree's user avatar
-1 votes
0 answers
12 views

Aligning a button component at the bottom of a border in Next.js using TypeScript

I am making my first website using Next.js and I need to align a button at the bottom of a component with a border. The bordered component has an explenation for activities, so the border height is ...
Eke Reus's user avatar
-1 votes
0 answers
21 views

Make SVG responsive while centering paths in React

I've searched for this a lot, including GPT4, and I was not able to find a working answer. Detailed description: I have an array of points, which are drawn inside an svg as small circles. The svg is ...
Daniel Guedes's user avatar
1 vote
1 answer
32 views

How to add negative values to Tailwind CSS utility plugin

How to Add Negative Values to Tailwind CSS Utility Plugin tl;dr I have a custom Tailwind utility plugin, with number values. I want to be able to add a - to the beginning of the class, to make it a ...
andrilla's user avatar
  • 440
-2 votes
0 answers
11 views

Img Element Cover My nav Element prevent clicking menu list - Tailwind

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=...
Ibrahim Al-kaladi's user avatar
-2 votes
1 answer
50 views

Bottom Navbar (CSS/React) [closed]

I am trying to make bottom navigation bar, but when I scroll page to the bottom, it overlaps on text/components. How can I make it visible all the time, but to not overlap on other items at the bottom ...
nikitas's user avatar
1 vote
1 answer
33 views

Animation messing up Tailwind styles

I have a css file with the following animation: .intro-x { opacity: 0; transform: translateX(100px); animation: intro-x 1s ease forwards; } @keyframes intro-x { from { opacity: 0; ...
Josué Mendonça's user avatar
-1 votes
0 answers
21 views

TxtAnime.js Animation Causes Visual Shifts Among HTML Elements

I'm encountering a problem with the txtanime.js library that seems to create a noticeable offset between HTML elements on my webpage. I'm using Tailwind CSS for the layout. Here's the complete code ...
Yoyo's user avatar
  • 19
-1 votes
1 answer
32 views

How to chain data attribute and disabled selector in tailwind?

I have an button with data-loading=true and disabled attributes. I need to write a style in tailwind that applies only if data-loading!=true and disabled. <button data-loading='true' disabled>...
SabirAmeen's user avatar
0 votes
0 answers
17 views

Styling navigation in swiper

hello i want a style like this navigation but i can't seem to style it correctly get it done, i will post below the picture that i need as i tried to make it absolute and position it outside of this ...
nick 's user avatar
  • 101
1 vote
1 answer
31 views

Tailwind Style Issues

I'm facing an issue with my Tailwind CSS installation using npm. When I install Tailwind CSS using npm, I can only find up to 1758 lines of CSS in my generated file, and the rest of the code seems to ...
Abhishek PS's user avatar
0 votes
1 answer
18 views

Make tailwind disabled variant work with any element EX: div, li

I have a clickable list <li type="button" class="bg-gray-100 disabled:bg-red-700" disabled="disabled"> Item 1 - disabled </li> <li type="button&...
Matte Crystal's user avatar
0 votes
0 answers
7 views

Table not responsive for mobile devices (using react-table)

As the title suggests, my table is not responsive for mobile devices. I applied overflow-x-auto but the scrollbar is not appearing. This is how it looks on mobile devices This is my first time posting ...
Ayan Kumar's user avatar
0 votes
1 answer
21 views

min-h-screen Tailwind CSS Class Didn't Cover the Width of Screen

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1....
Ibrahim Al-kaladi's user avatar
0 votes
0 answers
16 views

Headless UI popover open to the top instead of default to the buttom

I have a HoverMenu component within my Nuxt 3 or Vue 3 application which displays some information on the hover of the mouse. For this, I am using the Popover from @headlessui/vue. Everything works ...
BATMAN_2008's user avatar
  • 2,869
-2 votes
0 answers
25 views

Line Wrap Issue In Tailwindcss and Alpine js

When I include paragraph text in the "Add Test" popup, it displays correctly and fits neatly within the popup, as shown in the screenshot below. enter image description here However, when I ...
R. Elavarasan's user avatar
0 votes
0 answers
37 views

Sticky Element inside a Flex Container [duplicate]

I have two elements inside a flex container. When I scroll the page, the right element (second-element) should be sticky, but it doesn't work. This is the structure of my code (I use Tailwind CSS and ...
Sarah's user avatar
  • 21
0 votes
0 answers
32 views

Tailwind classes not working in vite project

I am following the official tailwind documentation on how to install tailwind in vite projects using vue. I followed the tutorial step by step and my tailwind classes dont seem to be working. I am not ...
codeouz's user avatar
  • 53
-1 votes
1 answer
27 views

Stretching Issue with children Overflow

I've set up a container div with an overflow set to auto. When a child element contains long text, it naturally overflows the container, triggering a horizontal scroll (x-scroll). While this is ...
peter45's user avatar
0 votes
0 answers
25 views

How can I implement draft-js generated html code to my next js app?

I have a web app build using nextJs, in a page I am trying to set html code generated from darftJs using below given code. <div className="mt-8 leading-7" dangerouslySetInnerHTML={{ ...
kish0n's user avatar
  • 147

1
2 3 4 5
175