CSS
Enhance projects come preloaded with Enhance Styles — a configurable utility class system — and with the ability to write scoped CSS within Enhance Elements.
However, that doesn’t stop you from using your own styles, as well. Using CSS with Enhance can be as easy as adding a <style>
tag to the head of your HTML document. Just edit the head.mjs
file in the root of your project and add a <style>
tag. That’s it.
Adding a style tag to your head.mjs
Look for the head.mjs
file in the root of your app.
app
└── head.mjs
Add a style tag and start writing CSS.
export default function Head () {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="icon" href="/_public/favicon.svg">
<style>
body {
background-color: rebeccapurple;
}
</style>
</head>
`
}
The benefits of adding a style tag to the head is that the styles will be immediately available when the page loads which will help avoid FOUCing your users. A potential downside is too much CSS in the head can weigh down your page as well as make it harder to edit.
Linking to CSS file
Some developers prefer to write CSS in a .css
file, so let’s look at how to do that.
Add a styles.css
file to the public folder.
app
├── public ............ static assets
│ └── styles.css
└── head.mjs .......... custom <head> component
Then open up the head.mjs
file and link to your new styles.css
file at /_public/styles.css
. Obviously you can put your CSS file anywhere you like in the public folder as well as name it whatever you like, just remember update the href
in your link tag.
/_public
is a special path that will automatically forward to a fingerprinted version of your static assets.
export default function Head () {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="icon" href="/_public/favicon.svg">
<link rel="stylesheet" href="/_public/styles.css">
</head>
`
}