极客时间对于推广渠道会有返利优惠，比如山月在极客时间买了一门课，再把课程分享给好友购买，这时极客时间会向山月返利20元左右。

而我现在做了一个返利平台，你可以在上边通过山月的链接购买课程，此时极客时间会向我返利。为了共同学习，而你可以添加我的微信 (shanyue94)，我将把极客时间给我的返利发一个红包全部返给你。

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

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

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

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

样式复用。避免过多的重复多个原子化的 css，DRY

.item {
  @apply hover:bg-white bg-gray-100 border border-dashed cursor-pointer;
}

伪类与嵌套的复杂选择器

.container:hover .item {
  @apply bg-gray-100;
}

CSS function

.item {
  background: url(https://shanyue.tech/shanyue94.jpg)
}

复杂不常用的 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，欢迎交流

← 零基础的前端开发初学者应如何系统地学习？简述流行 CSS 框架 TailwindCSS 的优缺点 →