@captaincss/captaincss NPM

An extensible, scalable set of CSS objects and utilities that harness Tailwind and ITCSS to provide structure to teams and large or long-lasting projects

Captain does not provide you with UI or design out of the box, but instead provides solid architectural layout objects and utilities, upon which anything can be built.

Talk the same language as other developers, and share a set of common objects across all of your website and app builds. All fully configurable using the native Tailwind config.

🏠 Homepage

Install

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

Usage

Install and setup Tailwind in your project: https://tailwindcss.com/docs/installation
Add CaptainCSS as a plugin in your tailwind.config.js:

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

Configure Captain's theme settings and variants in your tailwind config, exactly like Tailwind. Check defaultConfig.js for Captain's default configuration.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      frame: {
        ratio: {
          '4:3': '4:3',
        }
      }
    }
  },
  plugins: [
    require('@captaincss/captaincss'),
  ],
}