@mwap

Built-In CSS Support

Since MWAP is built around Webpack we include a few commonly used patterns out of the box such as CSS and CSS Module support.

CSS is by default processed by PostCSS with Autoprefixer and minimized using esbuild.

Global CSS

If you wish to provide global styles, it's best to define a styles.css and import it in your custom app.tsx component.

This may look something like:

import * as React from "react";
import { Helmet } from "react-helmet-async";


import { ScrollToTop } from "mwap";


import "normalize-css/normalize.css";


import "./styles/global.css";


const App = ({ children }) => {
  return (
    <>
      <ScrollToTop />


      <Helmet>
        <meta charSet="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Helmet>


      <React.Suspense fallback="">{children}</React.Suspense>
    </>
  );
};


export default App;

CSS Modules

Consider writing your component styles as CSS Modules, there are many benefits such as no more naming conflictions, explicit dependencies, no global scope and much more.

MWAP automatically compiles css files that end in .module.css as CSS Modules. All you have to do is import these files into your components!

components/dot.module.css

.dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

components/dot.tsx

import * as React from "react";


import styles from "./dot.module.css";


const Dot = ({ children }) => <span className={styles.dot} />;


export default Dot;

Custom Postcss config

To provide your own PostCSS config, create a postcss.config.js file if the root of your project.

Tailwindcss

Setting up tailwindcss is as easy as:

npm install -D tailwindcss
# or
yarn add -D tailwindcss

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    tailwindcss: {},
  },
};

tailwind.config.js

module.exports = {
  purge: ["./components/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Related

For more information on what to do next, we recommend the following sections: