Install required packages, and initialize Tailwind CSS:
npm i @edadma/react-tailwind
npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Edit ./tailwind.config.js
so that Tailwind CSS will work:
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}', './node_modules/@edadma/react-tailwind/dist/**/*.js'],
darkMode: 'class',
theme: {
extend: {},
},
plugins: [require('@tailwindcss/forms')],
}
Edit ./src/index.css
, the only 3 lines of CSS you will ever need:
@tailwind base;
@tailwind components;
@tailwind utilities;
Edit ./src/App.tsx
and start using react-tailwind
to build your app:
import { FC } from 'react'
import {
ThemeProvider,
Card,
ModeProvider,
ModeSwitcher,
Space,
Text,
} from '@edadma/react-tailwind'
const App: FC = () => (
<ThemeProvider>
<ModeProvider>
<Card border={false}>
<Space>
<ModeSwitcher /> <Text>Hello World!</Text>
</Space>
</Card>
</ModeProvider>
</ThemeProvider>
)
export default App