Tailwind CSS setup on dfx new [project]

Developers
1

Hi Everyone,

I am trying to setup the tailwind css to a fresh install “dfx new [project-name]” and can’t able to make it work.

Below is how I setup my tailwind.config.js file.

image
image716×405 27.3 KB

I enable module on the webpack file too as below

image
image862×340 37.9 KB

Please let me know where did I get it wrong.

2

I believe you also need to use postcss-loader

  module: {
    rules: [
      { test: /\.(ts|tsx|jsx)$/, loader: "ts-loader" },
      { test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] },
    ],
  },

Also you probably want to add .html to tailwind configs

content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
2 Likes
3

It works! now… thank you @coin_master I really appreciate it :heart:

1 Like