Strapi v4 plugin and tailwindcss

Community Packages Plugins
1

I have created a Strapi v4 plugin but I don’t want to use Strapi design system for my UI (I have create other plugins with Strapi design system]). I want to use tailwindcss

I have created tailwind.config.js and styles.css following installation docs and import them in /plugins/[plugin-folder]/admin/src/index.js of my plugin without any success.

Also tried add tailwindcss in /src/admin/webpack.config.js at config.plugins without success again.

Any suggestion? Someone has done it?

3 Likes
2

Looking into the same thing. I’ll post back if I am able to find a solution. Really don’t want to have to learn a new design system in order to build custom admin panels :pray:

1 Like
3

I was able to get this working by using the Tailwind CLI to compile a global.css and the compiled version into my plugin.

I’m planning on returning to this issue when I have more time to dedicate to integrating with Strapi’s Webpack build, but for now I can just run CLI in watch while developing.

5 Likes
4

This did the trick for me. Thanks!

2 Likes
5

Hi @gfargo @aditya,

Can you explain in detail how you did this?

6

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:

Screenshot 2024-07-11 at 9.59.39 AM
Screenshot 2024-07-11 at 9.59.39 AM1522×710 110 KB
"

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