Tailwind CSS

https://tailwindcss.com/

Setup

Docs: https://tailwindcss.com/docs/installation

Example for using ReactJs

1. Create your project (If you already have a project, skip this step)

   npm create vite@latest seminar-tailwind -- --template react

   cd seminar-tailwind

2. Install Tailwind CSS

   • Install tailwindcss and its peer dependencies via npm, you can use yarn

   npm install -D tailwindcss postcss autoprefixer

   • Create tailwind.config.js file

   npx tailwindcss init

3. Configure template paths

   Add the paths to all of your template files in your tailwind.config.js file.

   js export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }

4. Add the Tailwind directives to your CSS css @tailwind base; @tailwind components; @tailwind utilities;

5. Start your build process

   npm run dev

6. Start using Tailwind in your project

Customization

Docs: https://tailwindcss.com/docs/configuration

Components

https://tailwindui.com/

https://flowbite.com/

https://daisyui.com/

https://ui.shadcn.com/

https://www.flowbite-react.com/

...

Deployment

Demo

https://github.com/phthanhsgt/seminar-tailwind

Slide for sharing

Canva URL: https://www.canva.com/design/DAF4IyxCdIQ/vQ3FP-EJGEUgTjcSFhES8Q/edit?utm_content=DAF4IyxCdIQ&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton