Tailwind css is not working

[abudhakeer]

Thank you everyone for creating this wonderful project. Am starting to create a chrome extension for my side project. I am using tailwind css for my pophtml, which is inside App.js. But it is not rendering properly. Can anyone let me know if am missing anything in the setup or configuration?

Following are the changes i made in the respective file.

App.js

import "tailwindcss/tailwind.css";

tailwind.config.js

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

package.json

{
  "name": "nudgeme",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-browser-extension-scripts": "4.0.10",
    "react-dom": "^17.0.2",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.4",
    "postcss": "^8.4.12",
    "tailwindcss": "^3.0.23"
  }
}

postcss.config.js

module.exports = {
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

[ttimoww]

I've been looking into this for a while now as well. Did anyone you manage to fix this?

[abudhakeer]

It worked for me finally after lots of trial and error. Do the following and let me know if you see any issues. If not please mark it as the answer so that others can refer this :)

New file in the src folder - style.css

@import "tailwindcss/base";
@import "tailwindcss/utilities";

popup.html

<link rel="stylesheet" href="style.css" />

package.json

"build:tailwind-dev": "tailwindcss build src/style.css -c ./tailwind.config.js -o dev/style.css",
"build:tailwind-prod": "tailwindcss build src/style.css -c ./tailwind.config.js -o build/style.css",
"start": "npm run build:tailwind-dev && react-scripts start",
"build": "react-scripts build && npm run build:tailwind-prod",