Styling

Beyond vanilla CSS, Nokkio currently offers two options for styling your applications: CSS Modules and Tailwind CSS.

CSS Modules

CSS Modules are a dependable, familiar system for styling React applications. Nokkio supports CSS Modules out of the box.

You can import any CSS file ending in .module.css into your component, and the classes from that CSS file will be returned as an object. This is how Nokkio handles CSS by default. First, create a CSS file:

.container {
  display: flex;
}

Then, import and use it in your component:

import styles from './about.module.css';

export default function AboutPage() {
  return <div className={styles.container}>...</div>;
}

More about the capabilities and usage of CSS modules can be found here.

Tailwind CSS

Tailwind CSS is a popular utility-first CSS framework for styling applications. The easiest way to use Tailwind with Nokkio is to create a new project with the --tailwind flag:

nokkio create --tailwind my-nokkio-project

This command sets up all the necessary dependencies and creates a tailwind.config.js file in the root of your project. From there you can use Tailwind as your normally do.

Converting an existing project to Tailwind

If you already have a Nokkio project you'd like to start using Tailwind in, follow these steps to get started. First, install Tailwind and its dependencies:

npm install -D tailwindcss postcss autoprefixer

Then, initialize the tailwind.config.js file:

npx tailwindcss init

Next, add the pages directory to the content array so Tailwind knows to inspect those files for used class names:

module.exports = {
  content: ['./pages/**/*.{js,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Then, create a postcss.config.js file and add the plugins for Tailwind and autoprefixer:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ],
};

Almost done! Create a index.css file in pages/_layouts with the Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, import that CSS file in your main layout file (pages/_layouts/index.js):

import './index.css';

export default function Page({ children }) {
  return (
    <div className="flex mx-auto max-w-2xl">
      {children}
    </div>
  );
}