DEV Community

Zachery Morgan
Zachery Morgan

Posted on

Using Tailwind with Sanity and Next

I've never had issues with Tailwind and Next, but today I'm learning Sanity and met a new error to add to my collection.

Typically when adding Tailwind to Next, all you need to do is...

  1. npm i -D tailwindcss autoprefixer postcss
  2. npx tailwindcss init -p
  3. Add your tailwind imports to styles/globals.css:
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

  4. Edit your tailwind.config.js file

/* tailwind.config.js */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Only to see this on my homepage when running sanity start

Sanity Tailwind Error

After a little searching I came across this reply in the Tailwind Github.

/* tailwind.config.js */
const path = require("path");

module.exports = {
  content: [
    path.join(__dirname, "./pages/**/*.{js,ts,jsx,tsx}"),
    path.join(__dirname, "./components/**/*.{js,ts,jsx,tsx}"),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
Enter fullscreen mode Exit fullscreen mode
/* postcss.config.js */
const path = require("path");

module.exports = {
  plugins: {
    tailwindcss: {
      config: path.join(__dirname, "tailwind.config.js"),
    },
    autoprefixer: {},
  },
};
Enter fullscreen mode Exit fullscreen mode

https://github.com/tailwindlabs/tailwindcss/issues/6393#issuecomment-1080723375

Shoutouts to wanjas

Top comments (0)