Get help on Discord

How to Implement TailwindCSS Globally for the Studio

8 replies
Last updated: Nov 19, 2020
Is there any documentation on the 
@sanity/components
?
AI Update

The @sanity/components package was part of Sanity Studio v2 and has been deprecated. It's no longer actively maintained or documented, as it was part of the old "Parts system" that was removed when Studio v3 was released.

What replaced it?

For Studio v3 and beyond, you should use @sanity/ui instead. This is the modern UI component library that powers Sanity Studio and is what you should use for building custom components, plugins, and studio customizations.

The @sanity/ui documentation includes:

  • A complete component library with consistent styling
  • Interactive examples in Arcade (the UI component playground)
  • Better TypeScript support
  • Modern React patterns (React 18+)

Why the change?

When Sanity Studio v3 launched, they deprecated the Parts system (which included @sanity/components and the part:@sanity/components/* imports). The v3 architecture simplified customization by consolidating everything into the single sanity npm package and using standard ES module imports instead of the Parts system.

If you're still on v2

If you're working with an older Studio v2 project, the @sanity/components package may still be in your node_modules, but official documentation for it is no longer maintained. You can find some legacy references in the Sanity v2 recipes, but the recommendation is to migrate to Studio v3 to access current documentation and support.

For any custom UI work going forward, start with @sanity/ui and the custom component documentation.

Not yet – work in progress 🙂
In the meantime, what would be the best method to implement something like tailwindcss globally for the studio?
This is for custom components ?
Yes
Checked with the team. It’s currently not easy to extend the webpack-config, but there's a couple of ways to do it
• If you want to have full control over the tailwind build: Expose the custom input component as a plugin / npm-package (that you can alias on local dev)
• In order to import compiled Tailwindcss, you can do: 
import 'mytailwind.css?raw'
 in a component file
Cool thanks
user Y
, for anyone else wanting to implement the second solution you can do the following;

1. add the tailwind base css

// styles/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
2. add your postcss.config.js

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

3. add your tailwind config

// tailwind.config.js
npx tailwindcss init

4. add a build script to your package.json

// package.json
"scripts": {
  ...,
  "tailwind:build": "npx tailwindcss build ./styles/tailwind.css -o ./styles/tailwind.output.css"
},
5. import the css in your Component

import "../styles/tailwind.output.css?raw"

Oh! Would love to have this as a small guide :)

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?