CODEWITHSUNDEEP
reactjstypescripttailwind-csstailwind-in-js
AvirukBasak
AvirukBasak

Reputation: 147

How to use TailwindCSS utility classes with className prop in React

I've created a template (boilerplate) repository for React that provides ESLint, Typescript, TailwindCSS and Jest testing, and is built using Webpack.

However, TailwindCSS utility classes do not work if used in className prop of react components.

They work only with @apply in .css files.

GitHub URL AvirukBasak/reactjs-template-app.

Example

src/components/App/index.tsx The children don't get styled with 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

Upvotes: 1

Views: 405

Answers (0)

Related Questions