https://github.com/ashirbadgudu/vite-react-tailwind-css-stater

https://github.com/ashirbadgudu/vite-react-tailwind-css-stater

hacktoberfest hacktoberfest2022 react reactjs tailwindcss vite yarn

Last synced: 8 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/ashirbadgudu/vite-react-tailwind-css-stater
• Owner: AshirbadGudu
• Created: 2021-12-31T17:23:53.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2021-12-31T17:23:56.000Z (about 3 years ago)
• Last Synced: 2024-11-20T11:07:01.134Z (2 months ago)
• Topics: hacktoberfest, hacktoberfest2022, react, reactjs, tailwindcss, vite, yarn
• Language: JavaScript
• Homepage:
• Size: 27.3 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# `Vite React Tailwind Css Stater`

## Steps for creating `vite-react-tailwind-css-stater` with `yarn`

### Create a new react project with `vite`

```sh

yarn create vite

```

### Go to project directory and run

```sh

yarn

yarn dev

```

### Install Tailwind CSS with postcss & autoprefixer

```sh

yarn add -D tailwindcss postcss autoprefixer

```

### Generate `tailwind.config.js` and `postcss.config.js`

```sh

yarn tailwindcss init -p

```

### Modify `tailwind.config.js` file

```js

module.exports = {

  content: ["./src/**/*.{js,jsx,ts,tsx}"],

  theme: {

    extend: {},

  },

  plugins: [],

};

```

### Add tailwind base, components and utilities to `index.css`

```css

@tailwind base;

@tailwind components;

@tailwind utilities;

```