CODEWITHSUNDEEP
javascriptconfigurationtailwind-cssredwoodjs
Kayote
Kayote

Reputation: 15637

TailwindCSS content files within conf

Problem: My tailwindcss config file does not recognise & interpret the CSS written within the components. It works fine for tailwindcss written in CSS files.

I am using Redwood.js.

In RedwoodJs, the tailwindCSS config file is stored at ./web/src/config/.

'./web/src/config/tailwind.config.js':

module.exports = {
  content: [
    "./web/src/components/**/*.{js,jsx,ts,tsx}",
    "./web/src/pages/**/*.{js,jsx,ts,tsx}",
    "./web/src/layouts/**/*.{js,jsx,ts,tsx}",
    "./web/src/**/*.{js,jsx,ts,tsx}",
  ],

As per tailwindcss docs:

"Paths are relative to your project root, not your tailwind.config.js file, so if your tailwind.config.js file is in a custom location, you should still write your paths relative to the root of your project."*

Which is what I have done above. However, the classNames used within components are not transformed into CSS in the browser. What am I doing wrong?

enter image description here

enter image description here

SOLUTION EDIT: Correct string to pass to content is:

module.exports = {
  content: [
    "./src/components/**/*.{js,jsx,ts,tsx}",
    "./src/pages/**/*.{js,jsx,ts,tsx}",
    "./src/layouts/**/*.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}",
  ],

I fail to understand why the web folder is taken as root folder, when it is one-level within the repo. The only justification I can think of is that webpack is somewhere setting the core dir for postcss?

I would love some insight/ feedback into how the working solution is working, when it seems to go against the docs at TailwindCSS...

Upvotes: 0

Views: 394

Answers (0)

Related Questions