DEV Community

Zachery Morgan
Zachery Morgan

Posted on

4 4

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

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)