CODEWITHSUNDEEP
tailwind-cssvitedeno
callthecapital
callthecapital

Reputation: 95

How to configure TailwindCSS with a Deno Vite project?

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?

Upvotes: 5

Views: 4016

Answers (3)

user2025261
user2025261

Reputation: 377

Update Q4 2024 (deno 1.46.3)

deno run --allow-read --allow-write --allow-env npm:create-vite-extra@latest
  • Template: deno-vanilla
  • Variant: TypeScript
deno add npm:tailwindcss npm:postcss npm:autoprefixer

postcss.config.js

import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";

export default {
  plugins: [tailwindcss, autoprefixer],
};

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

src/style.css

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

deno task dev

Upvotes: 8

akw
akw

Reputation: 11

Steps to install tailwindcss in a new deno vite app and configure.

  1. Install tailwindcss.

    deno add npm:tailwindcss

  2. Install dependencies.

    deno add npm:postcss

    deno add npm:autoprefixer

  3. Initialize tailwindcss

    deno run npm:tailwindcss init

  4. Configure tailwind.config.js

    content: [ "./src/**/*.{js,ts,jsx,tsx}", ],

follow rest of the steps from step 4 as mentioned in the https://tailwindcss.com/docs/guides/vite

Upvotes: 1

Gepiden
Gepiden

Reputation: 839

I'm trying it myself and at the moment I can't implement it, but (https://jsr.io/@fresh/[email protected]) Deno-Fresh has plugin implementer tailwindCSS. I've been analyzing how it works for some time.

I don't like the idea of an Island folder, in Deno-Fresh, so I'm trying to add ➕ TailwindCSS support to the Deno+Hono project.

I know that my answer is not a ready-made solution, but maybe someone who knows how to program better will be able to do something.

Upvotes: 0

Related Questions