CSS

You can use any CSS solution you want. The starter template uses Tailwind CSS by default.

Tailwind is imported via CDN:

// components/layouts/Base.stencil
<html>
	<head>
		<script src="https://cdn.tailwindcss.com"></script>
	</head>

	...
</html>

Running Tailwind locally

If you want to run Tailwind locally and utilise the JIT engine, you can do the following:

Follow the instructions on how to use the Tailwind CLI tool

Create a style.css file in the assets directory

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

Update tailwind.config.js to watch for content in the output directory

// tailwind.config.js
module.exports = {
	content: [
		"./output/**/*.html",
	],
}

Add the following scripts to your package.json file

{
	"scripts": {
		"build": "./node_modules/.bin/paper build",
		"dev": "./node_modules/.bin/paper dev",
		"styles:watch": "npx tailwindcss -i ./assets/style.css -o ./output/style.css --watch",
		"styles:build": "npx tailwindcss -i ./assets/style.css -o ./output/style.css"
	}
}

Run npm run styles:watch in parallel to running to npm run dev
Run npm run styles:build when running npm run build

Plain CSS

If you want to write plain CSS without processing, you can add a .css file to the assets directory.

// assets/style.css
body {
	background: red;	
}

// components/layouts/Base.stencil
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="/style.css" />
	</head>
	<body>
		<slot />
	</body>
</html>