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.

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

1. Install and setup Tailwind in your project: https://tailwindcss.com/docs/installation

2. Add CaptainCSS as a plugin in your tailwind.config.js:

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

3. 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'),
  ],
}

👤 Jamie Warburton

• Twitter: @jamiewarb

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Please read our Contributing Guidelines first!

Please give a ⭐️ if this project helped you!