CaptainCSS on GitHub

Prefix Configuration

Customizing the default prefixes for your project.

Captain will inherit the prefix you've set for your tailwind classes by default, from config.prefix.

// tailwind.config.js
module.exports = {
  captain: {
    prefix: {
      objects: false, // A falsey value will default to config('prefix') instead
      components: false,
    },
  },
  ...
};

The following example demonstrates what your classes will look like with default Tailwind and Captain prefixing:

<a href="#content" class="skip-link">Skip to content</a>
<main id="#content">
  <figure class="stack bg-gray-100 rounded-xl p-8 md:p-0">
    <img class="w-32 h-32 rounded-full mx-auto" src="/profile-image.jpg" alt="" width="384" height="512">
    <div class="stack stack--lg text-center">
      <blockquote>
        <p class="text-lg font-semibold">
          “Tailwind CSS is the only framework that I've seen scale
          on large teams. It’s easy to customize, adapts to any design,
          and the build size is tiny.”
        </p>
      </blockquote>
      <figcaption class="font-medium">
        <div class="text-cyan-600">
          Sarah Dayan
        </div>
        <div class="text-gray-500">
          Staff Engineer, Algolia
        </div>
      </figcaption>
    </div>
  </figure>
</main>

To change your prefixes, set the objects and components option, under captain.prefix of your tailwind config file:

We recommend the following set up to get the most use out of ITCSS:

// tailwind.config.js
module.exports = {
  prefix: 'u-',
  captain: {
    prefix: {
      objects: 'o-',
      components: 'c-',
    },
  },
  ...
};

This will prefix all utilities, including those outputted by both Tailwind and Captain, with u-. Objects and Components outputted by Captain will be prefixed with o- and c- respectively.

The following example demonstrates what your classes will now look like:

<a href="#content" class="c-skip-link">Skip to content</a>
<main id="#content">
  <figure class="o-stack u-bg-gray-100 u-rounded-xl u-p-8 md:u-p-0">
    <img class="u-w-32 u-h-32 u-rounded-full u-mx-auto" src="/profile-image.jpg" alt="" width="384" height="512">
    <div class="o-stack o-stack--lg u-text-center">
      <blockquote>
        <p class="u-text-lg u-font-semibold">
          “Tailwind CSS is the only framework that I've seen scale
          on large teams. It’s easy to customize, adapts to any design,
          and the build size is tiny.”
        </p>
      </blockquote>
      <figcaption class="u-font-medium">
        <div class="text-cyan-600">
          Sarah Dayan
        </div>
        <div class="u-text-gray-500">
          Staff Engineer, Algolia
        </div>
      </figcaption>
    </div>
  </figure>
</main>

Captain-only prefixes

It's also possible to prefix just objects and components, and leave your Tailwind classes and Captain's utilities unprefixed.

This is a good solution when integrating with existing Tailwind projects that do not use a prefix, or when using a Tailwind integration with your IDE that doesn't support prefixes.

// tailwind.config.js
module.exports = {
  prefix: '',
  captain: {
    prefix: {
      objects: 'o-',
      components: 'c-',
    },
  },
  ...
};

The following example demonstrates what your classes will now look like:

<a href="#content" class="c-skip-link">Skip to content</a>
<main id="#content">
  <figure class="o-stack bg-gray-100 rounded-xl p-8 md:p-0">
    <img class="w-32 h-32 rounded-full mx-auto" src="/profile-image.jpg" alt="" width="384" height="512">
    <div class="o-stack o-stack--lg text-center">
      <blockquote>
        <p class="text-lg font-semibold">
          “Tailwind CSS is the only framework that I've seen scale
          on large teams. It’s easy to customize, adapts to any design,
          and the build size is tiny.”
        </p>
      </blockquote>
      <figcaption class="font-medium">
        <div class="text-cyan-600">
          Sarah Dayan
        </div>
        <div class="text-gray-500">
          Staff Engineer, Algolia
        </div>
      </figcaption>
    </div>
  </figure>
</main>