Using Tailwind with the App SDK

Learn how to use Tailwind in your custom apps built on Sanity, powered by the App SDK.

Tailwind is a popular styling library beloved by many developers — including some who build custom apps with the Sanity App SDK. This guide demonstrates how to get up and running with Tailwind and the App SDK.

In order to get started, we’ll presume you’ve already got a custom app initialized with the App SDK. If you don’t, follow along with our quickstart guide!

Once your app is initialized, you’ll need to install two Tailwind dependencies — the main Tailwind library, and Tailwind’s Vite plugin:

npm i tailwindcss @tailwindcss/vite

As you may know, custom apps built with the App SDK are React applications that run on Vite.

Given that fact, you might be tempted to follow Tailwind’s installation guide for Vite, but we require a slightly different setup process to accomodate for the auto updating nature of apps built with the SDK.

Thus, rather than setting up your own Vite config that might interfere with the core functionality of custom apps, you’ll need to extend the built in Vite config in order to register Tailwind’s Vite plugin. You can do this within the sanity.cli.ts file at the root of your custom app.

Use the example below to update the contents of your sanity.cli.ts file and register the Tailwind plugin:

import {defineCliConfig} from 'sanity/cli'

export default defineCliConfig({
  app: {
    organizationId: 'your organization ID goes here',
    entry: './src/App.tsx',
  },
  vite: async (viteConfig) => {
    const {default: tailwindcss} = await import('@tailwindcss/vite')
    return {
      ...viteConfig,
      plugins: [
        ...viteConfig.plugins,
        tailwindcss()
      ],
    }
  }
})

The Tailwind plugin is now configured for your app! All that’s left to do is to import Tailwind and put it to work.

Within your app’s src/App.css (or any other CSS file you choose to make use of and import within the scope of your application), add an @import statement to import Tailwind’s CSS:

@import 'tailwindcss';
/* Other styles here if you like… */

Be sure that the CSS file you add this @import statement to is itself imported within your application — likely within your src/App.tsx file:

import './App.css'
// Rest of your App.tsx here…

Start your custom app’s development server as usual:

npm run dev

You can now use Tailwind’s CSS classes in any of your app’s React components. For further guidance on using Tailwind, refer to Tailwind’s docs. Have fun!