如何使用插件创建顺风响应类

Question

如何使用插件重现以下scss？

.large-title {
    font-family: $font-family-2;
    @apply leading-none; 
    color: $large-title-color;
    @apply uppercase;

    @apply text-xl;

    // I don't know how to add these in the plugin
    @apply sm:text-2xl;
    @apply md:text-3xl;
    @apply lg:text-4xl;
    @apply xl:text-5xl;
} 

在我的配置文件中，我目前有：

module.exports = {
[...]
  plugins: [
    require('@tailwindcss/forms'),
    plugin(function({ addBase, config }) {
      addBase({
        '.large-title': { 
          fontFamily: [config('theme.fontFamily.family-2')],
          fontSize: config('theme.fontSize.xl'),
          lineHeight: config('theme.lineHeight.none'),
          color: config('theme.colors.primary.900'),
          textTransform: 'uppercase',
        },
      })
    })
  ],
}

唯一缺少的是我找不到如何在插件中添加来自类的响应式大小更改。

Answer 1

将@media查询添加到Tailwind's CSS-in-JS syntax中的类的一种方法是嵌套：

addBase({
  '.large-title': { 
    '@media (min-width: 500px)': {
      fontSize: theme('fontSize.xl'),
    }
  },
})

此外，可以使用theme()函数访问用户的断点：

const sm = theme('screens.sm', {})

将这两个代码片段结合起来，您可以：

const sm = theme('screens.sm', {})

addBase({
  '.large-title': { 
    `@media (min-width: ${sm})`: {
      fontSize: theme('fontSize.xl'),
    }
  },
})

如果你正在构建这个插件以供公众使用，需要注意的一点是，用户可能会完全改变他们的theme.screens配置。例如，如果用户从其配置中删除了theme.screens.sm密钥，则上面的代码片段将不再有效。