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

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', {})

结合这两个 sn-ps 你可以：

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

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

如果您构建此插件以供公众使用，需要注意的一点是用户可能会完全更改其theme.screens 配置。例如，如果用户从他们的配置中删除了theme.screens.sm 键，那么上面的 sn-p 将不再起作用。