CODEWITHSUNDEEP
reactjsoffice-jstailwind-cssoffice-addinsyeoman-generator
Alexander F-B
Alexander F-B

Reputation: 45

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?

Upvotes: 3

Views: 1193

Answers (3)

pandeyjicoading
pandeyjicoading

Reputation: 1

TS7030: Not all code paths return a value. also there is no taskpane.css inbuilt do we have to create what about the postcss.config.js it is also not there

Upvotes: 0

Christian C
Christian C

Reputation: 310

These were the steps needed to install it for me in an yeoman taskpane application with tailwind v3.3

  1. Install dependencies:

npm install --save-dev style-loader css-loader postcss postcss-loader postcss-preset-env tailwindcss

  1. Add the following to the "rules" block in your webpack.config.js in the project root directory:
{
   test: /\.css$/i,
   include: path.resolve(__dirname, "src"),
   use: ["style-loader", "css-loader", "postcss-loader"],
},

also add const path = require('path'); to the top of this file.

  1. Add these lines to the top of your taskpane.css
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Remove <link href="taskpane.css" rel="stylesheet" type="text/css" /> from your taskpane.html and add it as an import to the top of your src/taskpane/index.tsx like so:
import "./taskpane.css";
  1. Create a tailwind.config.js in the root of your project
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
  1. Add a postcss.config.js
const tailwindcss = require("tailwindcss");
module.exports = {
  plugins: ["postcss-preset-env", tailwindcss],
};

Done

Upvotes: 1

Eugene Astafiev
Eugene Astafiev

Reputation: 49395

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.

Upvotes: 2

Related Questions