Sanity CMS breaks after installing Tailwind CSS in Next.js project

I can see you're running into an issue after installing Tailwind CSS in your Next.js + Sanity project! While I couldn't see the screenshot you mentioned, this is a very common problem and I can help you solve it.

The issue you're experiencing is likely the "Unknown at rule @tailwind" error appearing in your Sanity Studio. This happens because when you install Tailwind CSS in your Next.js project, it creates a global postcss.config.js file that affects both your Next.js app AND your Sanity Studio (which lives in the /studio folder).

The Solution

The guide you followed was written for Studio v2, which is now deprecated. But more importantly, Sanity Studio has its own build configuration and doesn't need Tailwind CSS. The error occurs because your global PostCSS config is trying to process Studio files with Tailwind directives they don't understand.

Here are two ways to fix this:

Option 1: Scope PostCSS Config to Next.js Only (Recommended)

Instead of having a global postcss.config.js in your root, create it inside your Next.js-specific directories or use a more targeted approach:

1. Delete the root postcss.config.js file
2. Create postcss.config.mjs in your root with this content:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

3. Make sure your tailwind.config.js excludes the studio folder:

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    // Make sure NOT to include './studio/**/*'
  ],
  // ... rest of config
}

Option 2: Add PostCSS Config to Studio

If the above doesn't work, create a separate postcss.config.js inside your /studio folder:

// studio/postcss.config.js
module.exports = {
  plugins: {
    // Empty or Studio-specific plugins only
  },
}

This tells the Studio to use its own PostCSS configuration instead of inheriting from the root.

Additional Tips

• Consider upgrading to Studio v3 - The guide you followed is for the deprecated Studio v2. Studio v3 has better separation and fewer conflicts with Next.js tooling. It also requires Node.js 20+ and has improved architecture.

• Check your import paths - Make sure you're only importing your Tailwind CSS file (tailwind.css or similar) in your Next.js _app.js, NOT anywhere in the Studio code.

• Restart both dev servers - After making these changes, restart both yarn dev (Next.js) and yarn sanity (Studio) to ensure the configs are properly loaded.

The key principle here is that Sanity Studio and your Next.js app are separate applications that happen to live in the same repository. They each need their own build configurations, and Tailwind should only be configured for your Next.js frontend, not the Studio.

Let me know if you're still seeing issues after trying these solutions!