feat: tailwind-poc #6105
feat: tailwind-poc #6105
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
bot
added
front-end
Docker builds report
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
github-actions
bot
added
feature
github-actions
bot
added
feature
github-actions
bot
added
feature
| .flex { | ||
| @include flexbox(); | ||
| @include flex-direction(column) | ||
| // @include flex-direction(column) |
There was a problem hiding this comment.
Bug: Flex Direction Change Breaks Vertical Layouts
Commenting out flex-direction(column) for the .flex class changes its default behavior from column to row. This breaks existing layouts across the application that depend on .flex for vertical stacking.
| /> | ||
| <JSONReference title={'Invite Links'} json={inviteLinks} /> | ||
|
|
||
| <p>yolo</p> |
There was a problem hiding this comment.
Bug: Development Code Leaks to Production
A debug paragraph element <p>yolo</p> was accidentally committed to the Users and Permissions page, making temporary development code visible in production.
| p { | ||
| color: var(--text-primary) !important; | ||
| } | ||
| } |
There was a problem hiding this comment.
Bug: Global Paragraph Color Override Bug
The global p { color: var(--text-primary) !important; } rule forces all paragraph text to be red in light mode (yellow in dark mode). The !important flag overrides existing styles, breaking the design system and semantic text colors across the application. This appears to be debug code.
| {overflow.length > 0 && !isMeasuring && ( | ||
| <div | ||
| className='d-flex align-items-center justify-content-center ms-2 flex-shrink-0' | ||
| className='d-flex align-items-center justify-content-center ms-2 flex-shrink-0 btn btn-secondary' |
There was a problem hiding this comment.
Bug: Overflow Button Styling Conflict
Adding btn btn-secondary classes to the overflow button div conflicts with its existing inline styles (e.g., backgroundColor, borderRadius, height, width). This changes the visual appearance of the tabs overflow menu and is semantically incorrect for a div element.
| @@ -1,10 +1,54 @@ | |||
| @tailwind base; | |||
| @import "tailwind.css"; | |||
There was a problem hiding this comment.
Bug: Tailwind Base Styles Duplicated, Variables Undefined
The @tailwind base directive is included twice: once directly and again via the tailwind.css import. This duplicates Tailwind's base styles, increasing bundle size and potentially causing CSS specificity issues. Additionally, these Tailwind imports occur before the variables file, meaning custom SCSS variables are not defined when Tailwind's base styles are processed.
| }} | ||
| > | ||
| <span>{name}</span> | ||
| <span className='dark:text-red-500'>{name}</span> |
There was a problem hiding this comment.
Bug: Red Feature Names in Dark Mode
The dark:text-red-500 class was accidentally committed, causing feature names to appear red in dark mode. This appears to be test code from the Tailwind POC and is not intended for production.
|
|
||
| // Text colors | ||
| text: { | ||
| DEFAULT: '#FF0000', |
There was a problem hiding this comment.
Bug: Red Text Bug in Tailwind Config
The default text color in tailwind.config.js is set to #FF0000 (red), which appears to be debug code. This makes all default text red across the application, breaking the visual design.
1 participant
Thanks for submitting a PR! Please check the boxes below:
docs/if required so people know about the feature!Changes
Please describe.
How did you test this code?
Please describe.
Note
Add Tailwind CSS and Autoprefixer via PostCSS, wire into webpack, and apply initial Tailwind-based style/class updates.
tailwindcss,autoprefixer, andeslint-plugin-tailwindcss; createpostcss.config.js.tailwind.config.jswith custom theme (colors, fonts, radii, spacing, dark mode via class, preflight disabled).postcss-loaderforcss/scssinlocal,prod, and Django builds.web/styles/tailwind.cssand reference inweb/main.jsandstyles.scss..tabsbase styles.components/_input.scsscommented out.d-flex→flex, addbtn btn-secondary,dark:text-red-500).FeatureAnalytics.container.tsx,Tabs.tsx,OrganisationNavbar.tsx,UsersAndPermissionsPage.tsx.Written by Cursor Bugbot for commit 680d781. This will update automatically on new commits. Configure here.