reactjsoffice-jstailwind-cssoffice-addinsyeoman-generator

How to setup Tailwind CSS with a React Microsoft Office Add-in created with Yeoman Generator?


I created a Microsoft Office Add-in (for PowerPoint) with React using the Yeoman Generator as described here: https://learn.microsoft.com/en-us/office/dev/add-ins/develop/yeoman-generator-overview

Now, the question is how I can Tailwind to it.

Following the Tailwind installation documentation for Create React App (https://tailwindcss.com/docs/installation) does not work.

I thought that installing Tailwind CSS as a PostCSS plugin could be a good idea, but I didn't get it to work.

Any recommendations?


Solution

  • Skeletons generated by the yeoman generator uses webpack for bundling. It seems you need to set up Setup Tailwind CSS with Webpack.

    Also you may find the Tailwind not work as exepted with Webpack with JIT #4000 thread helpful.