npm create vite@latest
Tail wind official instruction doc
- Install tailwindcss and supported library
npm install -D tailwindcss postcss autoprefixer
- Create tailwind config file
npx tailwindcss init
- Add file extensions to tailwind config file in the contents property
"./index.html",
"./src/**/*.{html,js,jsx,ts,tsx}"
- Add the tailwind directives at the top of the
index.css
file
@tailwind base;
@tailwind components;
@tailwind utilities;
- Add the following details in plugin property of tailwind.config.js
plugins: [require("daisyui"), require("@tailwindcss/line-clamp")],
npm install @reduxjs/toolkit react-redux react-router-dom react-icons react-chartjs-2 chart.js daisyui axios react-hot-toast @tailwindcss/line-clamp
-
@reduxjs/toolkit (state management)
-
react-redux (binding redux with react)
-
react-router-dom (routing)
-
react-icons (for icons)
-
react-chartjs-2 (for chart)
-
chart.js (dependency)
-
daisyui (plugin for tailwind ui)(most popular component library for tailwindcss)
-
axios (instead of fetch for network request)
-
react-hot-toast (for toast notification)
-
@tailwindcss/line-clamp (plugin multiline truncation)
- install
npm i eslint-plugin-simple-import-sort
- add rule in eslint.cjs
"simple-import-sort/imports": "error"
- add simple-import-sort plogun in eslint.cjs
plugins: [..., "simple-import-sort"],
- To enable auto-import-save on file save - configure -> settings.json
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
- import and run
<Toaster />
as component just after<App />
- src/main.jsx
-
provide store to Provider - main.jsx
-
Footer - Footer
-
Layout - (for common or different layout ) -