using TailwindCSS for styling

[nkilm]

Description

How to add TailwindCSS to both content-script and popup html? I've tried installing Tailwind by referring the offical docs but the CSS is not getting applied. Any help would be appreciated.

[yosevu]

Hi @nkilm, I'll take a look at this and let you know!

[yosevu]

Is this the setup you wanted @nkilm?

I created an example in Popup src: https://github.com/yosevu/react-content-script/pull/17

[nkilm]

@yosevu Yes similar setup, but the example #17 you provided is not working for popup.

The tailwind classes are not applied to the popup,

/// <reference types="chrome" />
/// <reference types="vite-plugin-svgr/client" />

import Logo from "./Logo";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="bg-gray-800 min-h-screen flex flex-col items-center justify-center text-white text-lg">
        // the above classes are not applied
        <Logo className="App-logo" id="App-logo" title="React logo" />
        <p>Hello, World!</p>
        <p>I'm a Chrome Extension Popup!</p>
      </header>
    </div>
  );
}

export default App;

e.g - bg-gray-800 should make the bg gray colored

[yosevu]

Hmm, let's see if we can troubleshoot @nkilm. Did you run yarn build and reload the extension from dist? Also, did you try on the branch I created: add-tailwindcss-example?

This is what I see:

[nkilm]

@yosevu Ah it worked after I removed and added the extension with recent changes. Thank you so much Yosefu!✨