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 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.
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.
* Add third-parties dependency for GTM. Reexport the GTM from the common package.
* Add the TelemetryTagManager to four of the production apps.
* Add the GOOGLE_TAG_MANAGER_ID env var as a turbo dependency to the 4 apps.
* Skip rendering the tag manager if the env var is not set or not running on the platform.
* Fix the prop type to be extracted from the component.
* Add default values for consent to GTM.
* Another try to mimic gtag function.
* Fix a link in www.
* Try another approach.
* try.
* Remove the data-redaction flag.
* Remove extra code.
* Send a sign-up event if GTM is enabled.
* Send only the email to GTM.
* Minor fixes.
* Remove third-parties from pnpm lockfile.
* Lets try to make studio work again.
* Add CSP rules for img loading for GTM.
* Add event for testing.
* Add www.googletagmanager.com to the CSP rules.
* Add Stape to CSP rules.
* Fix stape CSP.
* Clean up the code.
* Remove extra console.log.
* Fix the stape urls for CORS.
* Fix the wrong category for Stape URL.
* Add google ads urls.
* Bump the timeout.
* Add google.com to the img-src for google ads.
* update csp
* remove comment
* update to use google analytics without signals
* add stape to default-src in csp
* move csp to middleware
* add google ads support and fix middleware base path
* remove google tag manager / google ads references from csp. load via stape proxy instead
* add double click url to image src
* add Google Tag Manager URL to CSP configuration
* add ga4 urls to csp
* remove google urls from CSP
---------
Co-authored-by: Alaister Young <a@alaisteryoung.com>
Docs preview sites are getting indexed in Google. Last time we "fixed"
this problem, we corrected the "X-Robots" header, but we forgot to
change the robots meta tag in the HTML, so we didn't actually solve the
problem. -_-
