Quickstart: Tailwind CSS

Quickstart with Tailwind CSS

Using Tailwind or any other PostCSS plugin is super easy with Plasmo.

Defining Your PostCSS Config


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

Adding Root Styles


@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");

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

Setting up Tailwind config


/** @type {import('tailwindcss/tailwind-config').TailwindConfig} */
module.exports = {
  mode: "jit",
  darkMode: "class",
  content: ["./**/*.{ts,tsx}"],
  theme: {
    fontFamily: {
      sans: ["Inter", "sans-serif"],
      serif: ["Georgia", "serif"]
  variants: { extend: { typography: ["dark"] } },
  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")]

Using Within React

Once you have all the config in place, start using Tailwind within your React components!

import { useReducer } from "react"

import "./style.css"

function IndexPopup() {
  const [count, increase] = useReducer((c) => c + 1, 0)

  return (
        display: "flex",
        flexDirection: "column",
        padding: 16
        onClick={() => increase()}
        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">
        <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">

export default IndexPopup

Full Example

To see a complete example of this quickstart, go to the with-tailwind example.