Tailwind CSS

Tailwind CSS is our go-to styling framework. This page covers installation, plugins, and a few tips we use across projects.

Extensions

Installation

Run the following to install Tailwind and its dependencies:

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

Create a postcss.config.js file in the root of your project:

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

Now generate your configuration file:

npx tailwindcss init

This will produce a minimal config at the root of your project:

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

Add the Tailwind directives to your CSS file:

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

Plugins

Most of our projects use these plugins:

Adding Plugins

Add plugins inside tailwind.config.js at the root of your project:

module.exports = {
  content: ["./components/**/*.js", "./pages/**/*.js"],
  theme: {
    extend: {},
  },
  corePlugins: {
    // To use the Bootstrap plugin, the default container must be disabled
    container: false,
  },
  plugins: [
    require("tailwind-bootstrap-grid")({
      gridGutterWidth: "32px",
      containerMaxWidths: {
        sm: "640px",
        md: "768px",
        lg: "1024px",
        xl: "1280px",
        "2xl": "1536px",
      },
    }),
    require("tailwindcss-debug-screens"),
    require("@tailwindcss/typography"),
  ],
};

Tailwind Debug Screens

This plugin shows the active responsive breakpoint on the page. Add the debug-screens class to your <body> tag or root layout component. Here’s how to set it up in React so it only shows in development:

const Layout = ({ children }) => {
  const inDevelopment = process.env.NODE_ENV === "development";

  return (
    <div className={`${inDevelopment ? "debug-screens" : ""}`}>{children}</div>
  );
};

export default Layout;

The debug-screens class is applied only when NODE_ENV is development. It won’t show up in production.

Tailwind Bootstrap Grid

This plugin brings Bootstrap-style grid class names into Tailwind. So you can use col-6 instead of w-3/5. It includes default gutters and is configurable via the plugin options.

Here’s a basic grid example using 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>