Here’s how to include CSS in a page.
Simplest thing, you can use the “React way” by using the style tag with an object:
<p style={{ textAlign: 'center' }}>test</p>
This works without any other change.
The next level is loading a CSS file.
You can import it from app/root.jsx, making it available across the entire site:
import styles from "./styles.css"
//...
export const links = () => [
{ rel: "stylesheet", href: styles },
]
//...
This includes the CSS included in the file app/styles.css.
If links already exports something like in the case of the default root.jsx, you can append to the exported array:
import styles from "./styles.css"
//...
export const links = () => [
...(cssBundleHref
? [
{ rel: 'stylesheet', href: cssBundleHref },
{ rel: 'stylesheet', href: styles },
]
: []),
]
//...
You can use a lot of different CSS setups including CSS Modules, PostCSS, SCSS, and more. The official docs go into that kind of setup.
One thing that I always want in my projects is Tailwind CSS, so let’s see how to enable that.
First install the tailwindcss package as a development dependency:
npm install -D tailwindcss
Next
npx tailwindcss init
This created a tailwind.config.js file in the project.
/** @type {import('tailwindcss').Config} */
export default {
content: [],
theme: {
extend: {},
},
plugins: [],
}
Configure it to search for Tailwind classes in the correct location:
/** @type {import('tailwindcss').Config} */
export default {
content: ["./app/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
Now create a app/tailwind.css with:
@tailwind base;
@tailwind components;
@tailwind utilities;
Then in app/root.jsx import it and add it in the links export:
import styles from "./tailwind.css"
//...
export const links = () => [
{ rel: 'stylesheet', href: styles }
]
//...
Now you can style your pages using Tailwind CSS classes:
<h1 className='text-center'>Welcome to Remix</h1>