How to set up tailwind in a motoko project with React in frontend canister?

Developers
1

I am trying to set up tailwind in my react frontend in my motoko project but nothing seems to work.
The is the tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

webpack.config.js react configuration:

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

In my main.css I just did this:

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

Thats pretty much all the setup I have and its not working.

2

Where’s is index.html located? Have you added to the tailwind configs?

3

Its fixed now, someone who had the same problem helped me. On top of the configuration above, I just had to import my css file with the tailwind directives into my index.jsx file.

1 Like