Tailwind CSS， 完整指南， 构建项目
- 1. Tools
- 1. Download VS Code and Node JS
- 2. Install VS Code Extensions
- 3. Download Source Code
- 2. Tailwind CSS Setup
- 1. Section Intro
- 2. What is Tailwind CSS
- 3. Link Tailwind CSS Through CDN
- 4. Setup Tailwind CSS Through CLI
- 5. Setup Tailwind CSS Through PostCSS & Vite
- 6. Setup Tailwind CSS Through PostCSS & Parcel
- 3. Tailwind CSS Basics
- 1. Section Intro
- 2. @tailwind Directive
- 3. Install VS Code Tailwindcss Intellisense Extension
- 4. Background Colors & Text Colors
- 5. Font Sizes
- 6. Padding and Margin Classes
- 7. Width Classes
- 8. Height Classes
- 9. Borders and Border Radius Classes
- 10. Shadow Classes
- 11. Gradient Background
- 12. Before and After Pseudo Classes
- 13. Hover Effect
- 14. Flex Container
- 15. Flex Items
- 16. Flex Wrap
- 17. Align Items Vertically and Horizontally
- 18. Block Elements and Inline Elements
- 4. Responsive Design & Tailwind CSS Customization
- 1. Section Intro
- 2. Responsive Classes
- 3. Create Responsive Grid System
- 4. Customize tailwind.config.js file
- 5. Set Default Font Family
- 6. Tailwind CSS Prefix
- 7. @apply Directive
- 8. @layer Directive
- 5. Create Tailwind CSS Button Components
- 1. Buttons Demo
- 2. Create New Project
- 3. Buttons HTML Code
- 4. Style Buttons
- 5. Rounded Buttons
- 6. Shadow Buttons
- 7. Button Ring
- 8. Material Buttons
- 9. Sweet Buttons
- 10. Solve Sweet Buttons Issue
- 11. Outline Buttons
- 12. Smart Buttons
- 13. Gradient Buttons
- 14. Loading Buttons
- 15. Block Buttons
- 16. Make Buttons Container Responsive
- 6. Alert Components
- 1. Alerts Demo
- 2. Multiple CSS Files
- 3. Alert HTML Code
- 4. Style Alert Style
- 5. Create More Alerts
- 6. Rounded Alerts
- 7. Beautify Alerts
- 8. Alerts with Close Option
- 9. Alerts with Close Option JavaScript
- 7. Login Form with Dark Mode
- 1. Login Form Demo
- 2. Create Card
- 3. Create Login Form
- 4. Dark Mode
- 5. Dark Mode Manually
- 8. Table
- 1. Table Demo
- 2. Table Head
- 3. Table Body
- 4. More Table Data
- 5. Create More Table Rows
- 6. Target Even Rows
- 9. Caferio Foods Website (Setting)
- 1. Section Intro
- 2. Create New Tailwind CSS Project
- 3. Chose Font Family
- 4. Favicon and Meta Description
- 10. Caferio Foods Website (Header)
- 1. Header Demo
- 2. Create Container
- 3. Create Badge
- 4. Header Heading
- 5. Header Sub Heading
- 6. Customers List
- 7. Header Foods Image
- 8. Add Logo
- 11. Caferio Foods Website (Navbar )
- 1. Navbar Demo
- 2. Navbar HTML Code
- 3. Style Navbar
- 4. Close Icon
- 5. Open Icon
- 6. Open and Close Navbar
- 12. Caferio Foods Website (Categories)
- 1. Categories Demo
- 2. Category HTML Code
- 3. Style Heading
- 4. Style Category
- 5. Hover Effect
- 6. Create more Categories
- 7. Increase z-index of Navbar
- 8. Code Refactoring
- 13. Caferio Foods Website (Dashes)
- 1. Food Dishes Demo
- 2. Skew Background
- 3. Food Dish Image
- 4. Food Dish Label
- 5. Food Dish Title
- 6. Food Dish Rating
- 7. Food Dish Pricing
- 8. Buy Now Button
- 9. Create more Dishes
- 14. Caferio Foods Website (Pricing)
- 1. Pricing Demo
- 2. Pricing Card HTML Code
- 3. Style Pricing Card
- 4. Pricing Features List
- 5. Order Now Button
- 6. Pricing Label
- 7. Second Pricing Card
- 8. One Quick Change
- 15. Caferio Foods Website (Testimonials)
- 1. Testimonials Demo
- 2. Testimonials Heading
- 3. Testimonials Structure
- 4. Testimonial User
- 5. Testimonial Message
- 6. Create more Testimonials
- 7. Gallery
- 8. Lightbox
- 9. Lightbox with JavaScript
- 16. Caferio Foods Website (Download App)
- 1. Section Demo
- 2. Add Background Image
- 3. Add Contents on The Left Side of an Image
- 17. Caferio Foods Website (Footer)
- 1. Footer Demo
- 2. Footer Logo and Copy Right Text
- 3. Create Footer Links
- 4. Create More Footer Links
- 5. Connect Sections With Navbar Links
- 18. Caferio Foods Website (LoaderSpinner)
- 1. Loader Demo
- 2. Create Loader
- 3. Close Off Loader When Page has Loaded
- 4. Update the Logo Images Code
- 19. Caferio Foods Website (Deployment)
- 1. Remote Website Demo
- 2. Make Project Ready for Deployment
- 3. Upload Project Source Code on GitHub
- 4. Deploy on Netlify