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.
8,713
questions
-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 ...
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 = [
[&...
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 ...
-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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 '...
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 ...
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 ...
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. ...
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 ...
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 ...
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:...
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, ...
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 ...
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 ...
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/...
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 ...
-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-...
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 ...
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 ...
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 ...
-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: ...
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 ...
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 ...
-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 ...
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, ...
-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 ...
-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 ...
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 ...
-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=...
-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 ...
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;
...
-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 ...
-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>...
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 ...
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 ...
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&...
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 ...
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....
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 ...
-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 ...
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 ...
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 ...
-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 ...
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={{ ...