No prefix

[dymond]

Is it possible to have the plugin eject no prefix? It's possible I'm missing something obvious here.

I've tried using componentPrefix: '',, but that just ejects it as .h1, .p, etc...

I also tried doing componentPrefix: 'typography ', and adding a class to the body, but it escapes the space, so that's not possible either.

Basically, just looking to get it to eject the styling as h1 instead of .c-h1.

[benface]

@dymond Ah, I see what you want, but that's not possible at the moment, kinda by design. Text styles are Tailwind components, meaning they are classes, not base styles which is where we would more likely use type selectors such as h1, p, etc. For what it's worth, I really don't recommend styling generic elements like h1 a certain way; Tailwind's own Preflight undoes all this stuff for a reason. The way I would suggest doing it is like the richText example in the documentation, which you can call typography if you want:

textStyles: theme => ({

  heading: {
    output: false,
    fontWeight: theme('fontWeight.bold'),
    lineHeight: theme('lineHeight.tight'),
  },

  typography: {
    fontWeight: theme('fontWeight.normal'),
    fontSize: theme('fontSize.base'),
    lineHeight: theme('lineHeight.relaxed'),

    '> * + *': {
      marginTop: '1em',
    },

    'h1': {
        extends: 'heading',
        fontSize: theme('fontSize.5xl'),
    },

    'h2': {
        extends: 'heading',
        fontSize: theme('fontSize.4xl'),
    },

    'h3': {
        extends: 'heading',
        fontSize: theme('fontSize.3xl'),
    },

    'ul': {
      listStyleType: 'disc',
    },

    'ol': {
      listStyleType: 'decimal',
    },

    // etc.
  },

}),

That will generate a .c-typography component (or .typography if you set componentPrefix to '') with selectors such as .c-typography h1, .c-typography h2, etc. That way you don't leak styles in the global scope, yet you don't have to add a class (or multiple classes) to every h2 element in a div that only contains text.

Does that make sense?

[dymond]

That is precisely what I was looking for. I didn't really want to leak it globally, but I have a quick project where I didn't want to have to tack a class onto every element. Thanks!

[benface]

Glad to hear it! Closing this issue then. :)