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

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)