CODEWITHSUNDEEP
tailwind-css
Philip
Philip

Reputation: 331

Tailwind not watching parent folder even though specified

I have a content configuration in tailwind to watch php files that are up a directory from where the tailwind.config.js

module.exports = {
    jit: true,
    purge: {
        content: ["./templates/**/*.{html,php}", "./assets/**/*.{js,jsx,ts,tsx}", "../*.{php}"]
    },
    

...

The files that are in ../*.{php} are not being transformed or watch by tailwind. When i build, these css styles and class names that are in this folder are not being built.

Is it not possible to watch a parent directory with tailwind?

Upvotes: 1

Views: 1283

Answers (1)

stickyuser
stickyuser

Reputation: 2890

I have this working for a WordPress theme using Tailwind.

Top level folder has package.json, and files like header.php, footer.php and index.php.

package.json includes the build scripts:

  "scripts": {
    "dev": "postcss css/tailwind.css --output tailwind.css --watch",
    "build": "postcss css/tailwind.css --output tailwind.css"
  },

In a folder /css I have the following:

postcss.config.js, note it has the config setting:

module.exports = {
  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: { config: './css/tailwind.config.js' },
    autoprefixer: {},
    cssnano: {
      preset: "default",
      autoprefixer: { add: false },
    },
  },
}

tailwind.config.js includes the content setting:

content: ["./**/*.php", ]

tailwind.css is also there with the usual:

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

Then from the top level directory I can run npm run dev.

Hopefully that can help you get it working with you desired setup.

Upvotes: 1

Related Questions