Css#

Pareto supports CSS, SASS, and CSS modules. By convention, files ending in .module.(css|scss) are treated as modular CSS.

Tailwind CSS#

Examples: with Tailwind CSS

Installing Tailwind#

Install the Tailwind CSS packages and run the init command to generate both the tailwind.config.js and postcss.config.js files:

npm install -D tailwindcss
npx tailwindcss init -p

Configuring Tailwind#

Inside tailwind.config.js, add paths to the files that will use Tailwind CSS class names:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./app/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Importing Styles#

Add the Tailwind CSS directives that Tailwind will use to inject its generated styles to a Global Stylesheet in your application, for example:

// index.css

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

Inside the client entry file (client-entry.tsx), import the index.css stylesheet to apply the styles to every route in your application.

// client-entry.tsx
import "./index.css";

const startApp = async (Page: ParetoPage) => {
  ...
};
export { startApp };

Using Classes#

After installing Tailwind CSS and adding the global styles, you can use Tailwind's utility classes in your application.

// app/home/index.tsx

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Pareto!</h1>
}