Flagsmith / Flagsmith/flagsmith

Setup Tailwind with ISO UI

Open
#6,107 0 comments 0 reactions 0 assignees View on GitHub
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

Image
Image
Image

- Tailwind resets some html/css
Action: Add corePolugins.preflight : false in tailwind config
Image

- Feature Rows layout broken
Action: not identified yet -> to look into mediaqueries
Places:
- Features main table
- Identity overrides
- Invites pending
Image
Image
Image

- Tooltip icon decentering with titles
Action: fixed with preflight false

- List item bullet point visible
Action: remove it (source not identified)
Image

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.