Questions tagged [tailwind-ui]

Beautiful UI components, crafted with Tailwind CSS. By the makers of Tailwind CSS.

249 questions
3
votes
2 answers

How to change Tailwind CSS background color with Svelte, based on a value unpacked in #each?

I am a beginner in both Svelte and Tailwind and want to avoid an XY-Problem, so here is my goal: I generate rows of a table with an #each loop in Svelte. (6 values per row). I now want to conditionally color the background of this row based on one…
3
votes
2 answers

Tailwind CSS classes is not working with React, error "You need to enable JavaScript to run this app..."

Talwind CSS is not working with React. I have installed Tailwind CSS as per the documentation (https://v1.tailwindcss.com/docs/installation) and my code is below. Can someone help me? Here is my browser pic of the inspect to understand my…
rupapayal
  • 45
  • 2
  • 8
3
votes
3 answers

tailwind css showing warnings about generated css file missing styles

This is my first time installing and running tailwind CSS. I follow the instructions and did everything accordingly but then it started showing some warnings like below Can you tell me why I am getting these warnings and anyway for me to fix them?…
3
votes
3 answers

Tailwind + Headless UI: Close Mobile Menu after click or clickaway

I am using Tailwind + Headless UI to create a hamburger Menu bar on mobile to show the menu on click. But when I click on the menu it does not close automatically and creates a bad UX.
Harsha M V
  • 54,075
  • 125
  • 354
  • 529
3
votes
1 answer

Unable to use tailwind headless ui with vue 2 .Object(...) is not a function

I am trying to do insert headless ui popover in my vue 2 project . I am having this error Uncaught TypeError: Object(...) is not a function at eval (headlessui.esm.js?d511:670) at Module../node_modules/@headlessui/vue/dist/headlessui.esm.js…
Biswas Sampad
  • 413
  • 1
  • 6
  • 19
2
votes
0 answers

Tailwind Flowbite modal not working with animation

I'm new in Tailwind CSS, and I'm using Flowbite as a ready made components via CDN. However, many options don't work with animation. Like that, modal is one of them. All the modal always open with a zoom in out effect, but in this case modal open…
Md. Ibrahim
  • 147
  • 7
2
votes
2 answers

TailwindCSS - content larger than screen when adding components

I am in the progress of learning React and TailwindCSS. I am currently trying to build a simple portfolio with a front page and a nav bar for some other pages. I have created the skeleton for my front page, but when I add the nav bar (header) the…
bragi
  • 183
  • 2
  • 12
2
votes
0 answers

Error when including Tailwind UI components in Next.js 13 application

I'm working on a personal Next.js 13 + TypeScript + Tailwind CSS project. For mocking up the app I am trying to use Tailwind UI components. However, I keep getting the following JSON parsing error in a nested dependency: I made a new blank Next…
2
votes
0 answers

React-datepicker css customisation in dark mode using Tailwind CSS for calendar elements

I'm trying to customise react datepicker's inside elements(calendar, headers, nav buttons) in dark & light mode while using with Tailwind css? In the below image- I'm looking to change css for those light coloured areas. I tried giving Tailwind's…
2
votes
1 answer

How to create the curve/ or a bend in a line with tailwindCss

How could I create the bend in a line with Tailwind CSS classes, as you can see I the picture there's a line under the green circle/dot. explicitly not using CSS stylesheet? or is it better to create an svg and simply use it? This is my current…
Mahijendra
  • 335
  • 5
  • 15
2
votes
0 answers

I installed tailwindcss. But live watch doesn't work properly

To check my output I have to run "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch" this command after calling every new tailwind class. I tried many times and watched many tutorial but failed to run ☹️
Mahfuz
  • 21
  • 1
2
votes
1 answer

Blinking cursor forever during tailwind install process

Command Image I am unable to search on SO hence detailing it here, this can be a duplicate question.Refer the Step 4:'Start the Tailwind CLI build process' TailwindInstallation the question is once I run the MSDOS command for CSS processing: npx…
Michael36
  • 150
  • 11
2
votes
1 answer

I am getting an error Module not found: Error: Can't resolve '@heroicons/react/solid'

I have run npm install @heroicons/react and my package.json looks like this: "dependencies": { "@headlessui/react": "^1.6.6", "@heroicons/react": "^2.0.0", ... but for some reason I cannot get it to work! I am still getting this error Please help…
2
votes
0 answers

Tailwind UI modal with long content goes off screen

When using Tailwind UI modal with long text content, modal heading and close button go off screen. is there a solution to display long content in a modal? for example is a scrollable modal possible in tailwind ui? Code used is from…
tonsaa
  • 41
  • 3
2
votes
3 answers

Dropdown list not working as expected Tailwind css

I'm using tailwind with cdn, and just copy pasting one of the dropdown lists on flowbite:
1 2
3
16 17