Quickstart with TailwindCSS

Using Tailwind CSS is super easy with Plasmo thanks to the built-in integration with PostCSS. The setup is identical to the official Tailwind CSS docs guide (opens in a new tab).

You can use any PostCSS plugins as well such as Autoprefixer, PurgeCSS, and more. This guide will walk you through the steps to get started with Tailwind CSS.

🎉

Easy Tailwind CSS in Chrome Extension!

Example

To see a complete example of this quickstart, go to the with-tailwindcss example (opens in a new tab).

Create a Plasmo Project with TailwindCSS

pnpm create plasmo --with-tailwindcss

Manual Installation

If you already have a Plasmo extension project and would like to add TailwindCSS manually, this section is for you!

Add Dependencies

pnpm i -D tailwindcss postcss autoprefixer

Generate your tailwind.config.js file

npx tailwindcss init

Defining Your PostCSS Config

postcss.config.js

/**
 * @type {import('postcss').ProcessOptions}
 */
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

⚠️

Ensure your file name extension is not .cjs but rather .js - the config may otherwise be erroneously parsed as JSON and fail.

Setting up Tailwind config

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: "jit",
  darkMode: "class",
  content: ["./**/*.tsx"],
  plugins: []
}

Adding Root Styles

style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Usage

In Extension Pages

Once you have all the configs in place, start using Tailwind within your React components! Below is an example of how to use Tailwind on the popup page:

popup.tsx

import { useReducer } from "react"
 
import "./style.css"
 
function IndexPopup() {
  const [count, increase] = useReducer((c) => c + 1, 0)
 
  return (
    <button
      onClick={() => increase()}
      type="button"
      className="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
      Count:
      <span className="inline-flex items-center justify-center w-8 h-4 ml-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full">
        {count}
      </span>
    </button>
  )
}
 
export default IndexPopup

In Content Scripts UI

To use Tailwind in a Content Scripts UI, you will need to import the style.css file as text data, and expose it to the CSUI lifecycle via the getStyle method to inject the style into the CSUI shadowDOM:

content.tsx

import cssText from "data-text:~style.css"
import { useReducer } from "react"
 
export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText
  return style
}
 
const PlasmoOverlay = () => {
  const [count, increase] = useReducer((c) => c + 1, 0)
 
  return (
    <button
      onClick={() => increase()}
      type="button"
      className="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
      Count:
      <span className="inline-flex items-center justify-center w-8 h-4 ml-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full">
        {count}
      </span>
    </button>
  )
}
 
export default PlasmoOverlay

ℹ️

Since Tailwind and its' plugins often rely on :root to declare CSS variables, be mindful of Content Scripts UI Styling CSS variables caveat if using built-in Root Container.

For example, if you plan on using DaisyUI (opens in a new tab), you will need to replace :root scope with :host before attaching the style to the shadowDOM.

content.tsx

import cssText from "data-text:~style.css"
 
export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText.replaceAll(':root', ':host(plasmo-csui)');
  return style
}

Quickstart: Redux Quickstart: Supabase