Everyone writes CSS differently. Judging that you're looking at a Tailwind plugin, it's likely that you write some utility classes.

Though maybe you like the BEM methodology. You might be a proponent of CubeCSS, or prefer to use SMACSS. Or any other CSS methodology, possibly something new I've yet to even hear of.

And that's great. How you like to write CSS is the right way to write CSS.

So one of CaptainCSS' core principles is to try and fit with what you already like to do.

I like utility classes

Great! No setup required! Everything will be configured for you out of the box, and if you've added a tailwind prefix, that will be added automatically too.

Here's a sample of what to expect from the classes:

.wrapper: {}
.wrapper-sm: {}
.wrapper-bleed: {}
.wrapper-edge: {}
.wrapper-edge-left: {}

.layout: {}
.layout-gap-8: {}
.layout-item: {}

.skip-link: {}

.font-bold: {}

I like BEMIT

Okay nice. So you're probably looking for class prefixes and BEM naming conventions. No sweat.

In your tailwind.config.js, set it up like this:

module.exports = {
  captain: {
    prefix: {
      components: 'c-',
      objects: 'o-',
    },
    separator: {
      elements: '__',
      modifiers: '--',
    },
  },
  prefix: 'u-',
};

And a sample of what to expect from the classes that will be produced are:

.o-wrapper: {}
.o-wrapper--sm: {}
.o-wrapper__bleed: {}
.o-wrapper-edge: {}
.o-wrapper-edge--left: {}

.o-layout: {}
.o-layout--gap-8: {}
.o-layout__item: {}

.c-skip-link: {}

.u-font-bold: {}

If you're interested in learning more about BEMIT, check out this CSSWizardry article.

I like CubeCSS

Cool cool cool. Getting cubey.

Okay, in that case, in your tailwind.config.js, set it up like this:

module.exports = {
  captain: {
    prefix: {
      components: false, // Defaults to your tailwind prefix if false
      objects: false,
    },
    separator: {
      elements: '__',
      modifiers: '-',
    },
  },
};

We don't yet support using data attributes for cube exceptions, but are considering adding it if there is demand.

And a sample of what to expect from the classes that will be produced are:

.wrapper: {}
.wrapper-sm: {}
.wrapper__bleed: {}
.wrapper-edge: {}
.wrapper-edge-left: {}

.layout: {}
.layout-gap-8: {}
.layout__item: {}

.skip-link: {}

.font-bold: {}

If you're interested in learning more about CubeCSS, check out the cube.fyi website.

I like _insert methodology here_

Nice choice! Try to configure CaptainCSS to fit how you like to write classes. And if it doesn't, let me know on GitHub, and we can talk about how we can make it flexible enough for you.