Skip to content

Styling with Tailwind CSS

To include tailwind class utilities, you basically need to Opt in [ select 'Yes' ] for Tailwind Css in the setup process. We will do the all the heavy lifting and that's it! you can start using tailwind utility classes in any section being page,content, popup etc.

> Terminal
1
2
3
4
5
✔ What's the name of your project? … app-name
✔ Choose preferred package manager … npm / yarn
✔ Do you want an src folder? … yes/no
✔ Do you want to use Typescript? … yes/no
✔ Do you want to use Tailwind Css? … yes

An example use of Tailwind in popup

/popup/popup.jsx
1
2
3
4
5
6
7
8
const PopupPage = () => {
  return <div
            className="px-10 py-1 bg-red-200 border ...">
         This is the extension popup
         </div>;
};

export default PopupPage;
/popup/popup.tsx
1
2
3
4
5
6
7
8
const PopupPage: React.FC = () => {
  return <div
            className="px-10 py-1 bg-red-200 border ...">
         This is the extension popup
         </div>;
};

export default PopupPage;

Setting up Tailwind for already existing Projects.

coming soon.