CaptainCSS home page

CaptainCSS

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>
ThemePrefixes