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

Posted 2023-03-07

【中文标题】如何使用插件创建顺风响应类

【英文标题】：how to create a tailwind responsive class using a plugin

【发布时间】：2021-03-04 03:10:25

【问题描述】：

如何使用插件重现以下 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',
        ,
      )
    )
  ],

唯一缺少的是我不知道如何从插件中的类中添加响应式大小更改。

【问题讨论】：

也许这会有所帮助：Referencing the user's config

【参考方案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 将不再起作用。

【讨论】：

@media (min-width: $sm) 附近出现 javascript 语法错误。它必须在 [] 中引用，作为 JavaScript 对象键，因为这是一个模板字符串。