search

nextui-org / nextui-cli

⌨️ A CLI tool that unlocks seamless NextUI integration.
MIT License
44 stars 15 forks source link

[BUG] - Missing circular-progress css in tailwind.config #85

Open dave--e opened 3 months ago

dave--e commented 3 months ago

NextUI Version

2.0.31

Describe the bug

Installed components: "@nextui-org/button": "^2.0.33", "@nextui-org/divider": "^2.0.28", "@nextui-org/image": "^2.0.28", "@nextui-org/input": "^2.2.1", "@nextui-org/link": "^2.0.31", "@nextui-org/listbox": "^2.1.21", "@nextui-org/popover": "^2.1.23", "@nextui-org/progress": "^2.0.31", "@nextui-org/select": "^2.2.2", "@nextui-org/system": "^2.2.1", "@nextui-org/theme": "^2.2.5",

nextui-cli version: 0.3.2

When adding the progress component via cli, it updates my tailwind.config.ts with: './node_modules/@nextui-org/theme/dist/components/(button|divider|image|input|link|listbox|popover|progress|select|ripple|spinner|scroll-shadow).js', However, I noticed that the css is missing for the CircularProgress component that included in @nextui-org/progress.

This is fixed when I manually update tailwindconfig.ts by adding circular-progress to the list like: './node_modules/@nextui-org/theme/dist/components/(button|circular-progress|divider|image|input|link|listbox|popover|progress|select|ripple|spinner|scroll-shadow).js'

But when I run npx nextui-cli doctor, it complains about the manual addition of circular-progress.

❗️Issue 1: incorrectTailwind

Your tailwind.config.ts is incorrect

The missing part is:
- need to add ./node_modules/@nextui-org/theme/dist/components/(button|divider|image|input|link|listbox|popover|progress|select|ripple|spinner|scroll-shadow).js

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

  1. In a project with tailwind, add the progress component via the cli: npx nextui-cli add progress.
  2. Use the CircularProgress component and provide a value where the circle has color. For example: image
  3. Update tailwind config and manually add circular-progress the content property. For example: './node_modules/@nextui-org/theme/dist/components/(circular-progress|progress).js',
  4. Go back to the page with the CircularComponent and notice the css styles now exist and are applied. For example: image

Expected behavior

As a developer, I expect that the styles for CircularProgress are added when adding @nextui-org/progress since CircularProgress is included in that package. However, it's only included the css for the Progress component.

Screenshots or Videos

No response

Operating System Version

macOS & Windows

Browser

Chrome

linear[bot] commented 3 months ago

ENG-1032 [BUG] - Missing circular-progress css in tailwind.config

DhairyaMajmudar commented 3 months ago

Hi, @wingkwong I would like to open a PR for this issue, can you pls. assign