Classes of react components not being added to styles.css

[hanspoo]

Hi,

Thanks for this project, is really cool, i have a problem with the nextjs integration, i've noticed the classes of the react components are not being scaned, becuase they're not being added to the global styles.css tailwind file, not static not jit, it seems that its because the component library is not being scanned for the new tailwind classes they need, ¿ any ideas ?

Thanks, Hans

[benjitrosch]

Hi @hanspoo,

I'm not sure I understood the problem. You shouldn't see any new styles automatically generated in your styles.css file (unless you manually build and output there yourself which you don't need to do). TailwindCSS includes styles based on the content property in the config file (we recommend to either safelist all during development with pattern: /./ or include the package node_modules/react-daisyui/dist/react-daisyui.cjs).

Do you have TailwindCSS and daisyUI installed, and your tailwind config setup like the README? If you've done all of that, could you post your tailwind.config.js and styles.css file?

[hanspoo]

If i add node_modules/react-daisyui/dist/react-daisyui.cjs in tailwind.config.js, like this:

module.exports = {
  mode: 'jit',
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx}',
    './src/components/**/*.{js,ts,jsx,tsx}',
    './node_modules/react-daisyui/dist/react-daisyui.cjs'
  ],
  theme: {
    extend: {}
  },
  plugins: [require('daisyui')]
}

I got this error:

Failed to compile

./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./src/pages/styles.css
TypeError: Cannot set property 'parent' of undefined

styles.css

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

[hanspoo]

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  }
}

[hanspoo]

package.json

{
  "name": "boilerplate-tw",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest --maxWorkers=50%",
    "test:watch": "jest --watch --maxWorkers=25%",
    "test:ci": "jest --runInBand",
    "generate": "yarn plop --plopfile generators/plopfile.js",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.1.1",
    "autoprefixer": "^10.4.2",
    "cssnano": "^5.0.16",
    "daisyui": "^2.14.1",
    "kafkajs": "^1.16.0",
    "moment": "^2.29.2",
    "next": "12.0.8",
    "next-transpile-modules": "^9.0.0",
    "prettier-plugin-tailwindcss": "^0.1.10",
    "react": "17.0.2",
    "react-daisyui": "^2.0.0",
    "react-dom": "17.0.2",
    "socket.io": "^4.4.1",
    "socket.io-client": "^4.4.1"
  },
  "devDependencies": {
    "@babel/core": "^7.16.12",
    "@storybook/addon-actions": "^6.4.14",
    "@storybook/addon-essentials": "^6.4.14",
    "@storybook/addon-links": "^6.4.14",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/builder-webpack5": "^6.4.14",
    "@storybook/manager-webpack5": "^6.4.14",
    "@storybook/react": "^6.4.14",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@types/jest": "^27.4.0",
    "@types/node": "^17.0.10",
    "@types/react": "^17.0.38",
    "babel-loader": "^8.2.3",
    "eslint": "8.7.0",
    "eslint-config-next": "12.0.8",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-storybook": "^0.5.6",
    "eslint-plugin-tailwindcss": "^3.3.2",
    "jest": "^27.4.7",
    "plop": "^3.0.5",
    "prettier": "2.5.1",
    "storybook-addon-next-router": "^3.1.1",
    "tailwindcss": "^3.0.24",
    "typescript": "4.5.5"
  },
  "resolutions": {
    "webpack": "^5"
  }
}

[benjitrosch]

Thanks for including the package.json! That was very helpful. Everything was working when recreating your example until I copy/pasted your package.json — maybe some mixture of packages contained in there leads to the error you're getting?

Using your package.json I was able to remove all errors using this fix:
#69

For your tailwind.config.js, use this:

module.exports = {
  content: [
    'pages/**/*.{js,ts,jsx,tsx}',
    'components/**/*.{js,ts,jsx,tsx}',
    'node_modules/react-daisyui/dist/react-daisyui.cjs',
    'node_modules/daisyui/dist/**/*'
  ],
  theme: {
    extend: {}
  },
  plugins: [require('daisyui')]
}

You can delete the line that says mode: jit since that's default in TailwindCSS 3.0, and I've added DaisyUI to the content.

Here's a repo for the test app based on your configs that's working on my end. Let me know if everything looks right to you and if there's still issues:
https://github.com/benjitrosch/test-nextjs-reactdaisyui-app

[hanspoo]

Thank you Benji, it works, tried to pach my project with the fix, didn't work, so i ended up using your project.

[michaelangeloio]

Thank you for this thread! the key was:

    'node_modules/react-daisyui/dist/react-daisyui.cjs',
    'node_modules/daisyui/dist/**/*'

[hanspoo]

Thanks 🙏 El dom, 23 de oct. de 2022 7:12 p. m., Michael Angelo < ***@***.***> escribió:

…

Thank you for this thread! the key was: 'node_modules/react-daisyui/dist/react-daisyui.cjs', 'node_modules/daisyui/dist/**/*' — Reply to this email directly, view it on GitHub <#100 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFEQ473SSK6GFALC2HQHS3WEWZ5DANCNFSM5T7F3BEA> . You are receiving this because you modified the open/close state.Message ID: ***@***.***>