Tailwind CSS Integration

Tailwind CSS v3 runs alongside Sharetribe's existing CSS Modules and PostCSS pipeline.

Why Preflight is disabled

Sharetribe uses sanitize.css as its CSS reset. Tailwind's Preflight would override global element styles (h1-h6, img, svg, etc.) and break the existing responsive layout. Preflight is disabled in tailwind.config.js:

corePlugins: {
  preflight: false,
}

The sharetribe-scripts patch

sharetribe-scripts v7.0.0 has a webpack PostCSS config that, when Tailwind is detected, replaces the entire Sharetribe plugin chain with CRA defaults. This breaks postcss-import, postcss-apply, nesting rules, and custom media queries used throughout the template.

The patch (patches/sharetribe-scripts+7.0.0.patch) merges Tailwind into the existing Sharetribe plugin chain instead of replacing it:

• postcss-import (existing)
• postcss-apply (existing Sharetribe custom plugin)
• tailwindcss/nesting
• tailwindcss
• postcss-flexbugs-fixes
• postcss-preset-env with nesting-rules and custom-media-queries re-enabled

Applied automatically via patch-package on yarn install.

When to remove: when upgrading sharetribe-scripts to a version that natively supports Tailwind alongside the existing plugin chain.

Content paths

Tailwind scans all src/**/*.{js,ts,jsx,tsx} files. This covers the Dashboard, Schedule, and shadcn/ui components.

CSS variables

shadcn/ui theme variables are defined in src/styles/tailwind.css and imported by pages that use Tailwind. The variables follow the shadcn/ui convention (--background, --foreground, --primary, etc.) using HSL values.

Adding new Tailwind-powered pages

1. Create your component using Tailwind utility classes
2. Import ../../styles/tailwind.css in the page component
3. No content path changes needed (already covers all of src/)