Tailwind 01 Landing Page 01 Tutorial
Modern Landing Page Tailwind CSS Project following YouTube Tutorial
Presentation
The main objetive of this project is to adquire some practise and agility using Tailwind CSS framework. To get it, I will follow the YouTube tutorial Modern Landing Page Tailwind CSS Project.
In addition, I will use other tecnologies like pnpm package manager and Vite builder that let me develop more quickly.
Getting Started: Installations & Settings
In order to develop this project it is necessary to install the Tailwind CSS IntelliSense plugin in Visual Studio Code and add the next lines in settings.json vscode configuration file.
"files.associations": {
"*.css": "tailwindcss"
},
"editor.quickSuggestions": {
"strings": true
}
After that, I will use the terminal for several things:
- To install pnpm package manager (it is not necessary to realize this tutorial, but I wanted to prove it )
- To create a Vite project
- To install development dependencies
- To initialize our Tailwind project
npm i -g pnpm
pnpm create vite@latest <project-name>
// Select: Vanilla
// Select: Javascript
cd <project-name>
pnpm i -D tailwincss postcss autoprefixer @tailwind/forms
pnpx tailwindcss init -p
I will continue with the next steps:
Edit tailwind.config.cjs:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/forms'),
],
}
Edit style.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
Import style.css into main.js and delete all the file content:
import './style.css'
Edit index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Homesmart</title>
</head>
<body class="bg-gray-800">
<script type="module" src="/main.js"></script>
</body>
</html>
Finally, I will create a local Git repository and push it to a remote GitHub repository. Of course, I will sure I rename master branch to main branch and node_modules directory is added to .gitignore file.
git init
git branch -M main
git add .
git commit -m "First commit"
git remote add origin <url-of-your-repository>
git push -u origin main
At the end of this step the project will be configured and ready to begin its develop.
Nothing else. Enjoy 🤓
Related Links
