Skip to main content

@mercell/tailwind

Tailwindcss is what is called a utility-first framework which means it will provide you with a lot of utility classes to easily adapt your code. It provides a huge global stylesheet consisting of these utility classes and our extracted component classes. This makes development easier but also requires us to optimize our build for production to minimize the global stylesheet to the clases you are using.

Usage​

Prerequisites​

  • You'll need to be authorized to Mercell npm registry. See installation
  • Have a project where you want to apply the design system. (We recommend using Create-React-App or our templates)

Installation​

Install the package using command below based on your package manager

yarn add --dev @mercell/tailwind tailwindcss@latest postcss@latest autoprefixer@latest

Create a tailwind.config.js in you project directory.

// tailwind.config.js
module.exports = {
    presets: [require('@mercell/tailwind/tailwind.config')],
    purge: [
        './src/**/*.{js,jsx,ts,tsx}',
        './node_modules/@mercell/*-react/dist/*.js',
    ],
};

Now you need to integrate the tailwind building with your app framework. tailwindcss has good documentation for that.

That should be it. Remember to optimize the build before shipping to production.

Application specific setup​