Strapi v4 plugin and tailwindcss

Sure, you should be able to follow the TailwindCSS CLI Installation. Specifically, take note of how they have an input.css which is all the files that are being passed in and the output.css is the file being loaded into the project.

For our case, we’ll want to import our compiled output.css into our Strapi Application on the “admin” side of things e.g.

  • Main App: src/admin/app.example.tsx
  • Plugins: src/plugins/<plugin-name>/admin/src/index.tsx
import "./styles/global.css";

In my case, I decided to scaffold a new plugin, naming it tailwind-css, and load it inside the plugin :sparkles:

"

One benefit of scaffolding out a new plugin to house and compile the CSS is it keeps all things tailwind consolidated in one place. Inside of the plugin’s package.json I have the following script targets setup.

"build:tailwind": "tailwindcss -i ./admin/src/styles/global.tailwind.css -o ./admin/src/styles/global.css -c tailwind.config.js",
"develop:tailwind": "tailwindcss -i ./admin/src/styles/global.tailwind.css -o ./admin/src/styles/global.css -c tailwind.config.js -w",

I’ll use the npm run develop:tailwind when I’m working on the Strapi application so that the CLI tool continually watches/regenerates the output.css based on the classes I’m adding inside Strapi.

Let me know if this makes sense or if I could add further clarification anywhere! :smile:

Cheers!

1 Like