Installation

First make sure you have installed Tailwind in your project. Learn how to install tailwind here. After installing tailwind, you can continue to install nila, run the following:

// Using npm
npm install nila
// Using yarn
yarn add nila

JIT and Purge Support

As nila uses tailwind to style the elements your tailwind config needs to know nila's files so that it can do proper purging and jit support. Add this in your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  purge: [
    './node_modules/nila/src/*.tsx',
    // ...
  ],
};

Forms Plugin

For form elements to work properly we need to install @tailwindcss/forms plugin too. It is a plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.

Install the plugin from npm:

// Using npm
npm install @tailwindcss/forms
// Using yarn
yarn add @tailwindcss/forms

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    // ...
  ],
}

That's all ✨

Optional: Fonts and Base Class

We use Inter font in this docs site, to use it you can add the following to the head tag:

<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />

and in your tailwind.config.js file:

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', 'Inter', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    plugin(function({ addBase }) {
      addBase({
        '.font-feature-alt': { 'font-feature-settings': '"salt"' },
      });
    }),
  ],
};

For better base styling you can add the following in your body class:

<body className="min-h-screen font-sans font-feature-alt antialiased transition bg-white text-gray-900">