Getting Started

Set up Master CSS in Remix

A quick guide to start using Master CSS in your Remix project.

Quick start

1. Create a Remix project

If you don't have a Remix project, create one first. It's recommended to refer Create Remix Project:

npx create-remix@latest project
cd project

* NPM version < 7, then npm init Remix@latest my-vue-app --template vue

2. Installation

npm install @master/css

3. Import

import { hydrate } from "react-dom";
import { RemixBrowser } from "remix";
import '@master/css';
hydrate( <RemixBrowser />, document)

4. Launch server

npm run dev

Hello world

Now, start developing your UI with Master CSS. 🎉

localhost:65154

Hello World

import styles from '@master/normal.css'
import { Links, Scripts } from "remix";
import type { LinksFunction } from "remix";
export const links: LinksFunction = () => {
return [
{ rel: "stylesheet", href: styles }
];
};
export default function App() {
return (
<html lang="en">
<head>
<Links />
</head>
<body>
<Scripts />
<h1 className="font:40 font:heavy italic m:50 text:center">
Hello World
</h1>
</body>
</html>
)
}

© Aoyue Design LLC.
Issue on this page
Edited byLola