Installing CaptainCSS

CaptainCSS is a plugin for TailwindCSS. It makes use of Tailwind's configuration, and the many helpers it provides for plugins.

That means you need to have Tailwind set up in your project first. If you haven't done that already, visit TailwindCSS's getting started docs.

Once you're set up, keep reading for Captain's installation and setup instructions.

Install Captain from npm registry

Captain is published to the npm package registry, and can be easily installed with a package manager such as yarn or npm:

yarn add -D @captaincss/captaincss # or npm install -D @captaincss/captaincss

It's installed as a devDependency, because it's only used at build time, and not at runtime. Therefore, it can be safely pruned from your node_modules on release.

Add Captain as a Tailwind plugin

Add @captaincss/captaincss as a plugin to your Tailwind configuration. Most of the time this is a tailwind.config.js file at the root of your project.

If you don't yet have a configuration file, follow Tailwind's instructions to add on.

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

If you'd like to customise your Captain installation, you can do so in two ways: changing theme settings or disabling individual plugins entirely.

Learn more about configuring Captain in the configuration documentation.

Include Captain in your CSS

If you haven't already configured Tailwind to be included in your CSS, see the guide on including Tailwind in your CSS.

Captain adds a number of components and utilities. That means, as long as you're outputting Tailwind's components and utilities, you'll get all the additional Captain goodness by default.

Building for production

When building for production, set NODE_ENV=production on the command line when building your CSS:

# An example of using tailwindcss-cli to build your css
NODE_ENV=production npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css

While Tailwind uses this for purge and minification, Captain uses it for certain helper utilities that shouldn't appear on production or be included in the production build.