Using TailwindCSS with Reactivated does not work

[KingOrdinaryCitizen]

I wanted to add TailwindCSS to my project, but I could only find this issue related to this: https://github.com/silviogutierrez/reactivated/discussions/280

Unfortunately it does not work, is there any documentation on how this functionality can be added?

[silviogutierrez]

What does "it did not work" mean? Can you post logs? Check in a sample project? Provide a reproduction?

The more information you provide the better I can diagnose.

[KingOrdinaryCitizen]

What does "it did not work" mean? Can you post logs? Check in a sample project? Provide a reproduction?

The more information you provide the better I can diagnose.

Sorry, you're right, that's my bad.

I first tried it using the steps as defined in issue #280, but I could not find the code to patch as mentioned there. I saw in the history of the files here that it changed to vite, so:

I've installed TailwindCSS based on the getting started with Vite documentation: https://tailwindcss.com/docs/guides/vite So npm install -D tailwindcss postcss autoprefixer and npx tailwindcss init -p

But after that I am stuck, these are the files I've changed for Tailwind support:

tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: { ... },
  plugins: [],
};

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tsconfig.json

{
    "compilerOptions": {
        ...
        "paths": {
            "@client/*": ["client/*"],
            "@reactivated": ["node_modules/_reactivated"],
            "@reactivated/*": ["node_modules/_reactivated/*"],
            "@tailwind": ["node_modules/tailwindcss"]
        }
    },
    "include": ["./client/**/*"]
}

Then after the above didn't work, I added a base.css file, containing:

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

And imported it in styles.css.ts:

import './base.css';

But still no luck unfortunately...

[silviogutierrez]

With vite it should actually be way simpler.

Attached is a patch that shows adding tailwind

0001-Add-Tailwind-CSS.patch to a project, hopefully that helps.