Set up Master CSS in Webpack

Guide to setting up Master CSS in your Webpack project.

If you don't have a Webpack project, create one first.

Terminal

mkdir my-appcd my-appnpm init -ynpm install -D webpack webpack-cli webpack-dev-server

Run the installer with --mode runtime from the project root. The browser runtime generates rules for class names that appear after the build.

Terminal

npm create @master/css@rc -- --framework webpack --mode runtime --yes

Run your Webpack development command.

Terminal

npm run dev

Now style your first element using Master CSS syntax.

localhost:8080

Hello World

The installer registers the Webpack plugin in webpack.config.* and creates src/index.css as the Master CSS entry.

webpack.config.mjs

import MasterCSSPlugin from '@master/css-webpack'export default {  plugins: [    new MasterCSSPlugin({ mode: 'runtime' })  ]}

src/index.css

@import '@master/css';

<h1 class="m-2xl italic font-5xl font-heavy text-neutral">  Hello World</h1>