如何在createGlobalStyle中引入Tailwind？

Question

我正在尝试在我的styled components全局样式中导入tailwind，以设置基础样式。

下面的代码无法正常工作，因此有什么建议可以让它正常工作吗？

import {createGlobalStyle} from 'styled-components';


const GlobalStyle = createGlobalStyle`
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  
  @layer base {
    h1 {
      @apply text-2xl;
    }
    h2 {
      @apply text-xl;
    }
  }
`

- Jonatanbs

Answer 1

试试 twin.macro !!~~~

点击这里！

// src/styles/GlobalStyles.js
import React from 'react'
import { createGlobalStyle } from 'styled-components'
import tw, { theme, GlobalStyles as BaseStyles } from 'twin.macro'

const CustomStyles = createGlobalStyle`
  body {
    -webkit-tap-highlight-color: ${theme`colors.purple.500`};
    ${tw`antialiased`}
  }
`

const GlobalStyles = () => (
  <>
    <BaseStyles />
    <CustomStyles />
  </>
)

export default GlobalStyles

添加双配置

// babel-plugin-macros.config.js
module.exports = {
  twin: {
    preset: 'styled-components',
  },
}

- JIAM SEO

---

很遗憾，这个库只适用于使用Babel的项目。截至今天，SWC还不受支持。 - SimoAmi