How to configure TailwindCSS with a Deno Vite project?

Question

I have initialized a new deno vite app and am trying to configure tailwindcss.

The first thing I did was add tailwindcss and postcss to my import_map.json and cache them:

{
  "imports": {
    "tailwindcss": "npm:tailwindcss@^3.2",
    "postcss": "npm:postcss@^8.4"
  }
}

I then generated a tailwind.config.js and postcss.config.js with the npx tailwindcss init -p command.

Lastly, I added the @tailwind rules to my index.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

At this point, I'm actually getting the lint error Unknown at rule @tailwindcss(unknownAtRules) in my index.css file even though I have the tailwindcss vs code extension installed.

When I run my project with deno task dev I get the "Hello World" text showing up but my tailwindcss classes do not take effect, here is my App.jsx file:

function App() {
  return (
    <div className="bg-red-500 rounded-lg shadow-xl min-h-[50px]">
      <p className="text-white">Hello World</p>
    </div>
  )
}

export default App

Note: I had to delete the postcss.config.js file in order to even run the app.

Are there any other steps I need to take to get tailwindcss working or is it just not compatible at this time?

score 1 · Answer 1 · answered Dec 19 '22 at 14:31

It seems TailwindCSS doesn't support Deno, see GitHub disscussion: Tailwind CSS support Deno

eg. running deno run -A npm:tailwindcss init fails immediately:

Uncaught TypeError: acorn.Parser.extend(...).extend is not a function

Alternatively I tried to use Windi CSS, but unfortunately the Vite plugin didn't work:

vite:c15:27:24 [vite] The filename, directory name, or volume label syntax is incorrect. (os error 123), stat 'C:\project\!C:\project\node_modules'

How to configure TailwindCSS with a Deno Vite project?

1 Answers1