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

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: [
  theme: {
    extend: {},
  plugins: [],


module.exports = {
  plugins: [

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.

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

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