极客时间对于推广渠道会有返利优惠,比如山月在极客时间买了一门课,再把课程分享给好友购买,这时极客时间会向山月返利20元左右。
而我现在做了一个返利平台,你可以在上边通过山月的链接购买课程,此时极客时间会向我返利。为了共同学习,而你可以添加我的微信 (shanyue94),我将把极客时间给我的返利发一个红包全部返给你

# 在 Next.js 中配置 styled-jsx 与 tailwindcss 协同工作

Next.js 中默认的 CSS 方案是 styled-jsx,而 tailwindcss 是最近大火的原子化 CSS。如果配合 styled-jsxtailwindcss 共同使用,则只需要维护很少的 CSS,解决方案如下:

  1. 大部分样式使用 tailwindcss
  2. 无法原子化的样式使用 styled-jsx

那什么样的样式无法原子化呢?有以下多种,但很庆幸的是只有一小部分

  1. 样式复用。避免过多的重复多个原子化的 css,DRY
    .item {
      @apply hover:bg-white bg-gray-100 border border-dashed cursor-pointer;
    }
    
  2. 伪类与嵌套的复杂选择器
    .container:hover .item {
      @apply bg-gray-100;
    }
    
  3. CSS function
    .item {
      background: url(https://shanyue.tech/shanyue94.jpg)
    }
    
  4. 复杂不常用的 CSS 属性

所以,现在重要的问题是在 styled-jsx 中如何配置使用 tailwindcss

# 配置

第一步、配置 babelrc,为 styled-jsx 添加 postcss 的插件

npm i styled-jsx-plugin-postcss
{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": [
            "styled-jsx-plugin-postcss"
          ]
        }
      }
    ]
  ]
}

第二步、配置 postcss.config.js,此时的 tailwindcss 必须是个对象

module.exports = {
  plugins: {
    tailwindcss: {},
  }
}

大功告成

关于山月

我的项目:
我的微信:shanyue94,欢迎交流
Last Updated: 3/10/2021, 2:46:44 PM