Flagsmith / Flagsmith/flagsmith
Setup Tailwind with ISO UI
- Dominant language
- Python
- Stars
- 6.6k
- Forks
- 567
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 124
Description
Configure Tailwind (v3) with the minimal setup and ensure that class conflicts are solved.
**DoD**
- [ ] I can use tailwind directives
- [ ] The most basic theme tokens have been declared
- [ ] The application can be built and bundled with tailwind
- [ ] Custom classes conflicting with tailwind directives have been removed
- [ ] UI regressions have been solved
**I can use tailwind directives**
- Setup tailwind config
- Configure postscss
- Import tailwind in relevant files
It is worth mentioning that we can setup tailwind directives with a prefix (e.g `tw-flex`) I would recommend not to. The regressions are well contained (e.g `flex` is problematic because re-implemented with `flex-direction: column`, but this can be easily fixed during this issue
**The most basic theme tokens have been declared**
- configure tailwind.config main theme with Flagsmith variables e.g
```
theme: {
extend: {
borderRadius: {
DEFAULT: '6px',
'lg': '8px',
'sm': '4px',
'xlg': '10px',
},
...
```
**UI regressions have been solved**
- `table-columns` class conflicts with tailwind, not displaying some tables content. -> Mostly one component
Action: remove scss `table-columns` and replace it with tailwind directives (padding)
Places:
- SAML Tab
- FeatureHealth
- ProjectSettings->Permissions
- Segments
- Change-requests
- Scheduling
- Identities
- Server Side SDK keys
- Compare Environments / Feature Values / Identities
- Users and permissions
- Org settings -> Custom Fields
- Org Settings -> webhooks
- Org Settings -> API Key
- Tailwind resets some html/css
Action: Add corePolugins.preflight : false in tailwind config
- Feature Rows layout broken
Action: not identified yet -> to look into mediaqueries
Places:
- Features main table
- Identity overrides
- Invites pending
- Tooltip icon decentering with titles
Action: fixed with preflight false
- List item bullet point visible
Action: remove it (source not identified)
Contributor guide
Research direction
Start by locating the Tailwind configuration, PostCSS configuration, and relevant stylesheet imports, then inspect the listed UI areas for class conflicts and regressions. Verify Tailwind directives, theme tokens, and application bundling, and consider the unresolved Feature Rows media-query issue and unidentified list-item bullet source before treating the UI checks as done.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- scss, tailwindcss
- Domain
- build-system, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100