Vue & Tailwind Product Page Mini-Project

Part 1: Project Setup and Planning

Every new project starts with a clean setup. We'll create a new Vue project and install Tailwind CSS. This will be a good refresher of the steps we took in earlier lessons.

Step 1: Create a New Vue + Vite Project

Open your Fedora terminal and run the official create-vue command. When prompted, you can name your project vue-landing-page and select "No" for all the optional features like Router and Pinia, as we won't need them for this specific project.

npm create vue@latest

Follow the prompts, then navigate into your new project directory and install the dependencies:

cd vue-landing-page
npm install

Step 2: Install and Configure Tailwind CSS

Next, we'll install Tailwind and its dependencies and create the necessary configuration files.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Now, configure your tailwind.config.js to tell Tailwind which files to scan for utility classes. This is a crucial step for the production build process.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}", // This ensures it scans all your Vue components
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Finally, create a main CSS file, add the Tailwind directives, and import it into your main.js.

1. Create src/assets/main.css.
2. Add the directives to src/assets/main.css:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

3. In src/main.js, replace the existing CSS import with your new one:

   // src/main.js
   import { createApp } from 'vue'
   import App from './App.vue'
   import './assets/main.css' // Import Tailwind's styles
   
   createApp(App).mount('#app')
   

For a quick reminder on these steps, the "Vue 3 + Vite + Tailwind (Recommended)" section in the Windframe article is an excellent reference.

Step 3: Clean Up and Plan

Before we build, let's look at our goal. A typical landing page has a clear structure.

For this project, we'll build everything inside the main App.vue component to keep things focused. In a larger application, you would break each of these sections into its own dedicated Vue component (TheHeader.vue, HeroSection.vue, etc.), but for this 60-minute project, a single file is perfect.

Start by cleaning up src/App.vue. Remove all the boilerplate content inside the <template> and <style> blocks, leaving you with a blank canvas.

Part 2: The Project Walkthrough

To guide our build, we'll follow a fantastic video tutorial that creates a modern landing page using HTML and Tailwind CSS. Your task will be to watch each segment and implement the structure and styles within your App.vue component.

Customizing Your Tailwind Theme

A key part of any project is setting up a custom theme. The video demonstrates how to add custom colors, fonts, and screen sizes to tailwind.config.js. Let's do that now.

After making changes to tailwind.config.js, you may need to restart your Vite development server (npm run dev) for the changes to take effect.

Part 3: Building the Page Sections

Now, let's build the page, section by section. For each part, you'll watch the corresponding video segment to understand the structure and classes, then implement it in your App.vue file.

Task 1: Build the Hero Section

The hero section is the first thing a user sees. It needs to be engaging and clearly communicate the product's value.

Your Turn:

1. Inside the <template> of App.vue, create a <section> element.
2. Following the video's guidance, build out the hero section's HTML structure and apply the Tailwind utility classes.
3. Remember to place your images in the public/ directory (e.g., public/images/) and reference them with a leading slash in your <img> tags (e.g., src="/images/hero-bg.png"). You can find placeholder images online or use ones from your own projects.

Task 2: Build the Feature Cards

Feature sections are used to highlight key benefits. Here, we'll build a section with cards that have an alternating layout on desktop.

Your Turn:

1. Below your hero section, add another <section> for the features.
2. Build out one feature card first, making sure it's fully responsive.
3. Duplicate the card and use lg:flex-row-reverse to create the alternating layout effect shown in the video.

Task 3: Build the Footer

Finally, every page needs a footer for navigation links and social media icons.

Your Turn:

1. Add a <footer> element at the end of your App.vue template.
2. Implement the branding, navigation, and social media links as shown. You can get icons from a library like Font Awesome by including its CDN link in your index.html.

Part 4: A Note on Reusable Styles

In the video, the instructor creates reusable button classes using the @apply directive.

This connects directly to our last lesson on CSS layers. You can add these button styles to your src/assets/main.css file within the components layer, just as we discussed.

/* src/assets/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
    @apply shadow-md py-3 px-6 rounded-md transition duration-300;
  }
  .btn-purple {
    @apply bg-bookmark-purple text-white;
  }
  .btn-white {
    @apply bg-bookmark-white text-black;
  }
}

This is a powerful best practice that keeps your markup clean (<button class="btn btn-purple">) and centralizes your component styles.

Conclusion

Excellent work! You have successfully built a complete, responsive landing page by applying your Vue and Tailwind skills to a practical project. You've gone from a blank slate to a finished product, translating a design into functional, styled components.

Key Takeaways:

• You can rapidly build UIs by translating an HTML/CSS guide into a Vue component structure.
• The combination of responsive prefixes (like lg:) and layout utilities (Flexbox, Grid) is the key to creating adaptive designs in Tailwind.
• Customizing your tailwind.config.js is essential for establishing a unique brand identity.
• Extracting reusable styles into component classes (using @apply within @layer) is a best practice that leads to cleaner and more maintainable code.

Next Lesson: We are now ready to tackle the Final Challenge Project. This will be a larger, full-stack front-end application where you will be responsible for defining the scope, designing the component architecture, managing state, handling routing, and more. This landing page project was the perfect warm-up for the exciting challenge ahead