https://github.com/edadma/react-tailwind

https://github.com/edadma/react-tailwind

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/edadma/react-tailwind
• Owner: edadma
• Created: 2022-01-10T15:03:30.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-01-01T18:38:32.000Z (about 1 year ago)
• Last Synced: 2024-01-01T19:35:33.259Z (about 1 year ago)
• Language: TypeScript
• Size: 874 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Getting Started with `react-tailwind`

Install required packages, and initialize Tailwind CSS:

```shell

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:

```javascript

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: 

```css

@tailwind base;

@tailwind components;

@tailwind utilities;

```

Edit `./src/App.tsx` and start using `react-tailwind` to build your app:

```typescript jsx

import { FC } from 'react'

import {

  ThemeProvider,

  Card,

  ModeProvider,

  ModeSwitcher,

  Space,

  Text,

} from '@edadma/react-tailwind'

const App: FC = () => (

  

    

      

        

           Hello World!

        

      

    

  

)

export default App

```