Skip to content
Get help on Slack

How to Implement TailwindCSS Globally for the Studio

8 replies
Last updated: Nov 19, 2020
Is there any documentation on the 
@sanity/components
?
Nov 19, 2020, 8:42 AM
Not yet – work in progress 🙂
Nov 19, 2020, 8:43 AM
In the meantime, what would be the best method to implement something like tailwindcss globally for the studio?
Nov 19, 2020, 8:45 AM
This is for custom components ?
Nov 19, 2020, 9:09 AM
Yes
Nov 19, 2020, 9:10 AM
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
Nov 19, 2020, 9:25 AM
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"

Nov 19, 2020, 9:49 AM
Oh! Would love to have this as a small guide :)
Nov 19, 2020, 9:50 AM
Nov 19, 2020, 9:54 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?