Less

Demo

npx extension dev @Extension/templates/less

In an HTML file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>New Extension</title>
    <!-- Add the Tailwind global stylesheet -->
    <link rel="stylesheet" href="./css/globals.css" media="screen" />
  </head>
  <body>
    <!-- Add the styles you need -->
   <h1 className="text-4xl font-bold">Hello, Extension.</h1>
  </body>
</html>

In a JavaScript File

// ./NewTabApp.jsx

import './css/globals.css'
 
export default function MyNewTabPage() {
  return (
    <h1 className="text-4xl font-bold">Hello, Extension.</h1>
  )
}

In a content_script file

// ./content_script.jsx

// There is no HTML in a content_script file, so
// we import our global CSS file via dynamic import. 
import('./css/globals.css')
 
export default function MyNewTabPage() {
  return <h1 className="text-3xl font-bold underline">Hello, Extension!</h1>
}

Next Steps

Learn how to apply styles to the multiple extension contexts in Working With Stylesheets.
Learn how to enable PostCSS capabilities in your extension.
Configure Tailwind in your extension.
Using Stylelint with Extension to lint your stylesheets.

🧩 Extension • create cross-browser extensions with no build configuration.