How to Implement Tailwind CSS to Twilio Flex Plugins?

[Mlfraga]

Hi,

I would like to know how to implement Tailwind CSS to Twilio Flex Plugins. I have already installed Tailwind CSS using npm and set up the tailwind.config.js file. I have also hosted a global.css file in the Twilio assets and used the loadCSS function from '@twilio/flex-plugin' to load them.

Here is the code snippet that I'm currently using:

import React from "react"
import { FlexPlugin, loadCSS } from "@twilio/flex-plugin"

import { Flex } from "@twilio/flex-ui/src/FlexGlobal"
import Leads from "./components/Leads"

const PLUGIN_NAME = "LeadsPlugin"

export default class LeadsPlugin extends FlexPlugin {
  constructor() {
    super(PLUGIN_NAME)
  }

  async init(flex: typeof Flex, manager: Flex.Manager) {
    loadCSS('https://cornsilk-herring-9773.twil.ioassets/global.css');

    flex.AgentDesktopView.Panel2.Content.remove('container'); // 'container' key is the CRMContainer
    flex.AgentDesktopView.Panel2.Content.add(<Leads key='customContent' />);    
  }
}

However, I'm still facing issues in implementing Tailwind CSS. Can someone help me with the correct way to implement it?

Thanks in advance!