Troubleshooting migration from v2 to v3 with Tailwind reference causing invalid JS syntax error

The error you're encountering is actually exactly what it says - Vite (which powers Sanity Studio v3) requires files containing JSX syntax to have a .jsx or .tsx extension. This isn't about Tailwind classes at all!

The Solution:

Simply rename your file from schemas/blockContent.js to schemas/blockContent.jsx (or .tsx if you're using TypeScript). This will immediately resolve the Vite parsing error.

About the Tailwind Classes:

Your assumption about the py-4 class isn't quite right - the error happens during the build/parse phase before the browser even tries to apply styles. However, you'll still want to ensure Tailwind is properly configured for your Sanity Studio to actually see those styles applied.

Setting up Tailwind in Sanity Studio v3:

Since your Studio is inside a Next.js project that already has Tailwind installed, you have a couple of options:

1. Extend your existing Tailwind config to include Studio paths:

   // tailwind.config.js
   module.exports = {
     content: [
       './app/**/*.{js,ts,jsx,tsx}', // your Next.js paths
       './sanity/schemas/**/*.{js,jsx,ts,tsx}', // Studio schemas
       // add other Studio paths as needed
     ],
     // rest of your config
   }

2. Import Tailwind in your Studio: Create a CSS file that imports Tailwind directives and import it in your sanity.config.ts:

   /* studio.css or similar */
   @tailwind base;
   @tailwind components;
   @tailwind utilities;

   Then in your sanity.config.ts:

   import './studio.css'

According to the Sanity documentation on Tailwind CSS, when using Tailwind with Sanity, you should extend the built-in Vite config in sanity.cli.ts rather than creating a separate config file.

V2 to V3 Migration Note:

This is one of those gotchas when migrating from v2 to v3 - Studio v3 uses Vite as its build tool, which has stricter requirements about file extensions for JSX. In v2, the build system was more lenient about this. The Parts System has been completely replaced in v3 with a JavaScript-based configuration approach, and Vite enforces proper file extensions for parsing.

Bottom Line: Rename to .jsx first to fix the immediate error, then ensure your Tailwind configuration scans your Studio files to apply the styles!