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).

Installation

Add Dependencies

pnpm i -D tailwindcss postcss autoprefixer

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

Quickstart: Redux Quickstart: Supabase