如何在 React 中使用带有 className 属性的 TailwindCSS 实用程序类

Question

我为 React 创建了一个模板（样板）存储库，它提供 ESLint、Typescript、TailwindCSS 和 Jest 测试，并使用 Webpack 构建。

但是，如果在 React 组件的

className

属性中使用，TailwindCSS 实用程序类将不起作用。

它们仅适用于

@apply

文件中的

.css

。

GitHub URL AvirukBasak/reactjs-template-app。

示例

src/components/App/index.tsx

孩子们不会被

font-bold

设计。

import React from 'react'
import { printHelloWorld } from '@/utils/script'

import background from '@/images/background.jpg'
import styles from './App.css'

const App = (): JSX.Element => {
  printHelloWorld()
  return (
    <div className={styles.app + ' font-bold'}>
      <h1>Demo App</h1>
      <p>This is a Paragraph</p>
      <img src={background} />
    </div>
  )
}

export default App

Answer 1

Tailwind 使用模块化样式，因此您必须模块化地创建 css 文件。要在 React 组件中使用 TailwindCSS 实用程序类，您可以创建一个包含实用程序类的样式对象，然后使用 className 属性应用它们。这样，您就可以保持 TailwindCSS 所鼓励的实用程序优先的方法。

这就是导入和使用的样子：

// src/components/App/index.tsx

import React from 'react';
import { printHelloWorld } from '@/utils/script';

import background from '@/images/background.jpg';
import styles from './App.module.css'; // Change the import to use a CSS module

const App = (): JSX.Element => {
  printHelloWorld();
  return (
    <div className={`${styles.app} font-bold`}>
      <h1 className="text-2xl">Demo App</h1>
      <p className="text-gray-700">This is a Paragraph</p>
      <img src={background} className="max-w-full" alt="Background" />
    </div>
  );
};

export default App;