0

I tried to setup tailwind and daisy ui using react and typescript. I add some configuration file like tailwind.config.ts and postcss.config.cjs. I don't know how to setup postcss config in typescript file. I think my configuration is complete but i don't know why tailwind doesn't work. Here's is my configuration:

tailwind.config.ts

import type { Config } from 'tailwindcss'

export default {
  content: [
    "./index.html",
    "./src/**/*.{js, ts, jsx, tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
} satisfies Config

postcss.config.cjs

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
}

index.css

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

package.json

{
  "name": "pokemon",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.15",
    "@heroicons/react": "^2.0.18",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "^3.3.2"
  },
  "devDependencies": {
    "@types/node": "^20.4.1",
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.2.6",
    "@typescript-eslint/eslint-plugin": "^5.61.0",
    "@typescript-eslint/parser": "^5.61.0",
    "@vitejs/plugin-react": "^4.0.1",
    "autoprefixer": "^10.4.14",
    "daisyui": "^3.2.1",
    "eslint": "^8.44.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.1",
    "postcss": "^8.4.25",
    "typescript": "^5.0.2",
    "vite": "^4.4.0"
  }
}
Yustina Yasin
  • 147
  • 2
  • 12
  • The answer is because space in my tailwind.config.ts "./src/**/*.{js,ts,jsx,tsx}", . I deleted the space and boom it works. Why everytime i stuck and post a question i found the answer by myself haha. – Yustina Yasin Jul 12 '23 at 21:03
  • 1
    Could you please post that as an answer so that others can more easily benefit? After a time limit, you can mark it as accepted (and the system will show that fact, instead of you having to edit the title). – Darryl Noakes Jul 12 '23 at 21:14

0 Answers0