Tailwind CSS

Almost all our projects include TailwindCSS as the default styling framework and on this document we will focus on some tips and tricks to make working with Tailwind easier.

Extensions

Installation

First step to install is to run:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Create a new postcss.config.js file in the root directory with the following code:

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

Now create your configuration file:

npx tailwindcss init

This will create a minimal config at the root of the project:

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

Now include tailwind in your css file:

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

Plugins

Almost all our projects include the following plugins:

Using Plugins

In order to use the plugins you have to include them inside the tailwind.config.js file in the root of your project:

module.exports = {
  content: ['./components/**/*.js', './pages/**/*.js']
  theme: {
    extend: {},
  },
  corePlugins: {
    // Default container needs to be disabled in order to use the Bootstrap plugin
    container: false,
  },
  plugins: [
    // eslint-disable-next-line no-undef
    require('tailwind-bootstrap-grid')({
      gridGutterWidth: '32px',
      containerMaxWidths: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        '2xl': '1536px',
      },
    }),
    // eslint-disable-next-line no-undef
    require('tailwindcss-debug-screens'),
    require('@tailwindcss/typography'),
  ],
}

Tailwind Debug Screens

A Tailwind CSS component that shows the currently active screen (responsive breakpoint). In order to use it in your project you have to include it in the <body> tag or <Layout> component. The following example is in React:

const Layout = ({ children }) => {
   const dev = process.env.NODE_ENV === 'development'


    return (
      <div className={`${dev ? 'debug-screens' : ''}`}>
        {children}
      </div>
    </>
    )
}


export default Layout;

The code above checks if the environment is on development and will display the responsive indicator, otherwise in production it will not display anything.

Tailwind Bootstrap Grid

This plugin provides all the Bootstrap grid names for Tailwind, and we find it more convenient to use col-6 instead of w-3/5. It also provides gutters by default and you can easily change them from the config.

An example grid made with this plugin:

<div class="container">
  <div class="row">
    <div class="md:col-6 lg:col-3"></div>
    <div class="md:col-6 lg:col-3"></div>
    <div class="md:col-6 lg:col-3"></div>
    <div class="md:col-6 lg:col-3"></div>
  </div>
</div>