Is it possible to add multiple media queries at Tailwindcss plugin?

Question

Here is my Tailwindcss version 3.0.24.

I want to create a prefix css class like this:

<div class="myTestVariant:text-red-600">hello world</div>

and try to complie css by Tailwindcss like:

@media (max-width: 400px) {
   myTestVariant\:text-red-600:active {
     color: rgb(220, 38, 38, var(1));
     // color may setted by tailwind.config.js 
   }
}

@media (min-width: 401px) {
   myTestVariant\:text-red-600:hover {
     color: rgb(220, 38, 38, var(1));
     // color may setted by tailwind.config.js 
   }
}

And I tried to use addVariant to customize my variant. Here is my tailwind.config.js

    const plugin = require('tailwindcss/plugin')
    module.exports = {
      content: [
        './index.html',
        './src/**/*.{vue,js,ts,jsx,tsx}',
      ],

  theme: {
    extend: {},
  },
  plugins: [
    plugin(function({ addVariant, e, postcss }) {
      addVariant('myTestVariant', ({container, separator }) => {
        const supportsRule1 = postcss.atRule({ name: 'media', params: 'screen and (min-width: 401px)' })

        const supportsRule2 = postcss.atRule({ name: 'media', params: 'screen and (max-width: 400px)' })
        
        supportsRule1.append(container.nodes)
        supportsRule2.append(container.nodes)

        container.append(supportsRule1)
        container.append(supportsRule2)

        supportsRule1.walkRules(rule => {
          rule.selector = `.${e(`myTestVariant${separator}`)}${rule.selector.slice(1)}:active`
        })

        supportsRule2.walkRules(rule => {
          rule.selector = `.${e(`myTestVariant${separator}`)}${rule.selector.slice(1)}:hover`
        })
      })
    }),
  ],
}

Actually, it doesn't work.

But when I only add one media queries, it's work.

const plugin = require('tailwindcss/plugin')
        module.exports = {
          content: [
            './index.html',
            './src/**/*.{vue,js,ts,jsx,tsx}',
          ],
    
      theme: {
        extend: {},
      },
      plugins: [
        plugin(function({ addVariant, e, postcss }) {
          addVariant('myTestVariant', ({container, separator }) => {
            const supportsRule1 = postcss.atRule({ name: 'media', params: 'screen and (min-width: 401px)' })
    
            supportsRule1.append(container.nodes)
            container.append(supportsRule1)
    
            supportsRule1.walkRules(rule => {
              rule.selector = `.${e(`myTestVariant${separator}`)}${rule.selector.slice(1)}:active`
            })
          })
        }),
      ],
    }

I think the problem is: I am not familiar with postCss API.

Can someone do me a favor? please.

Answer 1

You can add the custom screen breakpoint in the tailwind.config.js as follows:

module.exports = {
  theme: {
    screens: {
      //like you can add extra-extra-small screen as
      'xxs': '400px',
      // => @media (min-width: 400px) { ... }

      'xs': '401px',
      // => @media (min-width: 401px) { ... }

      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}

You can find more here https://tailwindcss.com/docs/screens#adding-smaller-breakpoints