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

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