Adding breakpoints in newUtilities

[adrianjacob]

Hi,

I am using a combination of tailwind, twin.macro and styled components in gatsby.

I have a bunch of newUtilities in my tailwind.config.js file such as the following (which work perfectly)

    plugins: [
        ({ addUtilities, theme }) => {
            const newUtilities = {
                
                ".btn": {
                    borderRadius: theme("borderRadius.full"),
                    paddingLeft: theme("spacing.8"),
                    paddingRight: theme("spacing.8"),
                    height: theme("spacing.10"),
                    fontWeight: theme("fontWeight.semibold"),
                    borderWidth: theme("borderWidth.0"),
                    cursor: theme("cursor.pointer"),
                },
                
            }
            addUtilities(newUtilities)
        },
    ],

However, I want to add some more padding at the 'lg' screen break size but i cant work it out (pseudo code below)

    plugins: [
        ({ addUtilities, theme }) => {
            const newUtilities = {
                
                ".btn": {
                    borderRadius: theme("borderRadius.full"),
                    paddingLeft: theme("spacing.8"),
                    paddingRight: theme("spacing.8"),
                    height: theme("spacing.10"),
                    fontWeight: theme("fontWeight.semibold"),
                    borderWidth: theme("borderWidth.0"),
                    cursor: theme("cursor.pointer"),
                    // @media min-width theme("screens.lg") {
                    // paddingLeft: theme("spacing.12"),
                    // paddingRight: theme("spacing.12"),
                    //}
                },
                
            }
            addUtilities(newUtilities)
        },
    ],

Any suggestions much appreciated as I have been pulling my hair out for 1/2 a day.

Thanks

[adamwathan]

Try this:

plugins: [
  ({ addComponents, theme }) => {
    const newComponents = {
      ".btn": {
        borderRadius: theme("borderRadius.full"),
        paddingLeft: theme("spacing.8"),
        paddingRight: theme("spacing.8"),
        height: theme("spacing.10"),
        fontWeight: theme("fontWeight.semibold"),
        borderWidth: theme("borderWidth.0"),
        cursor: theme("cursor.pointer"),
        [`@media min-width ${theme("screens.lg")}`]: {
          paddingLeft: theme("spacing.12"),
          paddingRight: theme("spacing.12")
        }
      }
    };
    addComponents(newComponents);
  }
]

Or this:

plugins: [
  ({ addComponents, theme }) => {
    const newComponents = {
      ".btn": {
        borderRadius: theme("borderRadius.full"),
        paddingLeft: theme("spacing.8"),
        paddingRight: theme("spacing.8"),
        height: theme("spacing.10"),
        fontWeight: theme("fontWeight.semibold"),
        borderWidth: theme("borderWidth.0"),
        cursor: theme("cursor.pointer"),
        '@screen lg': {
          paddingLeft: theme("spacing.12"),
          paddingRight: theme("spacing.12")
        }
      }
    };
    addComponents(newComponents);
  }
]

EDIT: Sorry just realized you're using addUtilities, make sure you are using addComponents for this situation. A btn class is definitely a component and not a utility, you wouldn't want to bake in media query stuff to a utility ever.

[adrianjacob]

Thanks for the response. I now get the following"

Cannot read property 'match' of undefined

[adrianjacob]

Ah - just seen your edit - will try :)