This PR migrates all tailwind configs in the apps to be CSS configs.
They import a shared CSS Tailwind config from the `config` package
(which in turns imports the old JS config).
The shared JS config will be migrated to CSS in a followup PR.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Centralized Tailwind into a config-driven entrypoint and updated the
app build flow to use the new build step; many apps now import unified
global styles.
* **Style**
* Migrated global styles to a Tailwind v4-style setup, added
project-wide content scanning, consolidated theme imports, standardized
theme tokens (including new --container-site max-width), and added a
small prose utility to remove paragraph margins.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This PR fixes a bug where a user might choose `classic-dark` as a theme
in `studio` but then `docs` and `marketing` apps will look weird.
To test:
- Change the localStorage value of `theme` to `classic-dark`
- Open `www` and `docs` apps, they should look ok
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a new "classic-dark" theme option for enhanced visual
customization.
* **Improvements**
* Unified and simplified theme handling across apps for more consistent
behavior.
* Improved system-theme detection and smoother transitions when
switching themes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
# Changes
## Removed unused themes
- Deleted `concept-two.css` (unused) and `dark-combined.css` which was
identical to `dark.css`
- Removed the alias `deep-dark` to `dark` theme since it was unused
## Removed Figma token transform scripts
- Deleted the entire `internals/transform/` directory (~700 lines of JS)
— these scripts transformed Figma tokens into Tailwind variables but are
no longer needed
- Deleted `internals/tokens/cleanse-css-for-tailwind.js` and
`extract-design-tokens.js`
- Removed related dependencies from `package.json`
## Removed other unused files
- Deleted `shadcn.css` (unused)
- Deleted `tailwind-theming.md` (outdated doc),
https://supabase.com/design-system/docs/color-usage is a better resource
## Refactoring
- Extracted the `motion-safe-transition` Tailwind plugin into its own
file (`packages/config/tailwind-plugins/motion-safe-transition.js`)
- Renamed the tailwind class generation script for clarity
- Added stub `tailwind.config.js` files in packages that were missing
them, so VSCode IntelliSense works in those workspaces
- Updated `packages/ui/README.md` to reflect current usage patterns
(imports, styling conventions) instead of outdated Figma tokens workflow
# Testing
- Check all apps whether they have the correct themes with the correct
colors
[Linear
task](https://linear.app/supabase/issue/FE-3059/clean-up-unused-ui-build-artifacts-themes-and-figma-token-scripts)
This pull request migrates all SCSS stylesheets in the `apps/studio` and
`apps/docs` projects to CSS, updates import paths accordingly, and
consolidates PostCSS configuration to use a shared config. The migration
includes renaming files, updating import statements, converting SCSS
comments to CSS comments, and removing redundant or legacy configuration
files. The changes improve maintainability and consistency across the
codebase.
**Migration from SCSS to CSS:**
* All SCSS stylesheets in `apps/studio/styles` and `apps/docs/styles`
have been renamed to `.css`, and their contents updated by converting
SCSS comments (`// ...`) to CSS comments (`/* ... */`). All relevant
import statements in the app entry points have been updated to reference
the new `.css` files.
**PostCSS configuration consolidation:**
* The separate `postcss.config.cjs` files in `apps/design-system`,
`apps/learn`, and `apps/studio` now all import from a shared
`config/postcss.config`, ensuring consistent PostCSS setup across
projects. The legacy `postcss.config.js` in `apps/studio` has been
removed.
**Code and style consistency improvements:**
* All instances of the SCSS-specific `#{!important}` in Tailwind
`@apply` rules have been replaced with the standard CSS `!important`
syntax.
* Minor fixes and comment updates were made throughout the stylesheets
to improve readability and maintainability, such as moving or clarifying
TODOs and notes.
These changes streamline the styling approach, reduce build complexity,
and make it easier to maintain and scale the design system and
documentation styles.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Consolidated PostCSS configuration across apps
* Migrated many stylesheet imports from SCSS to CSS
* Standardized CSS comment and @apply syntax for consistency
* **Chores**
* Removed SCSS (sass) dev dependency
* Added autoprefixer and tailwindcss/nesting to PostCSS plugins
* Removed SCSS module type declarations (cleaned up typings)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
* Add shimmering-loader CSS to ui-patterns.
* Import the shimmering-loader classes from the ui-patterns component.
* Remove ShimmeringLoader from studio.
* Migrate studio to use ui-patterns/ShimmeringLoader.
* Migrate away from using default import for ShimmeringLoader.
* Fix the css imports in docs and studio.
* feat(code-block): add word wrap functionality and controls to code blocks
* feat(code-block): enhance layout of code block with improved line number display and structure
* fix h-full issue
* fix Prettier issue
---------
Co-authored-by: Chris Chinchilla <chris.ward@supabase.io>
* feat(docs): main troubleshooting page
* feat(docs): global troubleshooting page layout
* feat(docs): global troubleshooting page filter logic
* enhance(docs): troubleshooting page ui & filters
Improve UX and accessibility of global troubleshooting search page.
- Implement TroubleshootingFilterStateProvider for managing filter state
- Add TroubleshootingFilterEmptyState component
- Improve TroubleshootingFilter UI with applied filters display
- Update TroubleshootingPreview component with better layout and accessibility
- Add TroubleshootingEntryAssociatedErrors component for displaying related errors
- Refactor Troubleshooting utils and schemas
- Update troubleshooting content template
* feat(docs): individual troubleshooting pages
Add individual pages for detailed information on troubleshooting
entries. Small fixes to UI for troubleshooting displays.
- Wrap GlobalTroubleshootingPage with SidebarSkeleton
- Add TroubleshootingErrorListDetailed component for detailed error display
- Implement TroubleshootingBackLink component for navigation
- Update TroubleshootingPreview to use Next.js Link and include parent page
- Refactor Footer component to accept className prop
- Add hideFooter option to SidebarSkeleton
- Minor updates to TopNavBar and other utility functions
* fix: minor styling issues
* tweak(troubleshooting docs): use breadcrumbs
* tweak(troubleshooting docs): use sidebar for filter
* enhance(troubleshooting docs): navigation, keywords
Better navigation for individual troubleshooting entries, using a
version of the sidebar + keywords handling via search params for good
linking behavior
Details:
- Add TroubleshootingSidebar to TroubleshootingPage
- Implement query state management for keywords using nuqs
- Improve accessibility and styling of troubleshooting components
- Update empty state handling and related keywords display
- Upgrade nuqs package to version 1.19.1
* fix(docs): wrap useSearchParams in Suspense
* seo(docs): add canonical link to troubleshooting
* enhance(docs,troubleshooting): auto-reveal errors
On troubleshooting search pages, if the searched term matches a hidden
error, auto-reveal it when searching. When the search term is cleared,
hide programmatically-opened errors while preserving user-opened ones.
* enhance(docs,troubleshooting): search bar
Add search bar to individual troubleshooting pages
* fix(docs): breadcrumb links
Fix breadcrumb linking so it uses next/link instead of reloading entire
app on navigation.
* fix(docs): typo
* enh(docs): new troubleshooting design
* enh(docs): use new multi-select
* enh(docs): troubleshooting responsive styles
* Update apps/docs/content/troubleshooting/monitor-supavisor-postgres-connections.mdx
Fetching recommendations on the server takes too long before the first
load, so it's faster to load the basic not-found page and generate the
recommendations on the client side.
Add a docs feedback widget to allow upvoting and downvoting pages.
Votes (completely anonymized, barely more than a counter) go to a database in the main supabase-com project. If the user has accepted telemetry, the votes also go to Logflare with a bit more info. Post-vote, logged-in users can leave a comment, which goes to the `platform/feedback/send` endpoint. There is a warning in the feedback modal that the feedback is not anonymous.
Quick fix to add a wrapping option that makes tabs visible if there are
many of them.
Long-term fix would be to detect overflow and switch to a dropdown in
that case. Or use dropdown for smaller screens only and let it wrap on
larger screens (since it will be rarer for wrapping to trigger there).
* migrate some www components to tokens
* consolidate InteractiveShimmerCard to Panel component
* update tokens in blog
* update tokens in careers page
* update tokens in customers section
* update tokens in open-source section
* update tokens in Realtime page
* update tokens in Storage and Vector
* update tokens in SplitCodeBlockCarousel
* update tokens in PGCharts
* remove unused css files
* update tokens in Card
* update tokens in Pricing page
* clean up priving page imports
* remove hardcoded theme vars
* migrate first half of defaultTheme.ts to tokens
* migrate second half of defaultTheme.ts to tokens
* improve inputs
* add foreground to text-light and text-lighter
* add foreground to text-light and text-lighter
* migrate docs components with styling tokens
* migrate docs components with styling tokens
* fix broken Repos component
* fix broken classes in blog
* update tokens on Button and other components
* update tokens on IconPanel
* update studio main layout base styling tokens
* update tokens across studio, docs and www
* update tokens across studio, docs and www
* update ui/Panel to styling tokens
* update ExampleProject and TableEditorMenu tokens
* www vector page tokens
* update studio UI tokens
* update other studio UI tokens
* update more studio UI tokens
* change tokens here, change tokens there
* finish updating colors with tokens variables
* add gui sandbox for theme experimentation
* use common package for www, docs and studio and fix Command K tokens
* provide light mode default tokens options
* fix conflict leftover
* update loading line
* fix className typo
* fix prettier
* update themeSandbox preset default values
* fix text-background0
* prettier
* update warningBanner with warning color
* switch all border-border with border-default
* improve border-secondary and foreground-muted in light mode
* force ring color on toggle
* fix button bg color and border-muted light token
* fix input bg color
* fix dark button hover
* fix homepage product card
* fix code-hike table header colors
* button dark border
* remove tabIndex leftover from homepage main ctas
---------
Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
