Marketing-TailwindCSS-Template

Marketing-TailwindCSS-Template is a Static React-Vite Frontend Landing Page, using React-Vite, TailwindCSS, Framer-Motion, React-Animate, React-Icons, and deployed on Netlify.

Note: To check this web app live, click here: https://marketing-arnob.netlify.app

To Install Dependencies

Before you launch this web application, please make sure to install all required dependencies, which are listed in the package.json file.

To install all dependencies, run this command from your project folder: npm install

To Install NodeJS

Make sure you have NodeJS installed on your machine first, The installation instructions are here: https://nodejs.org/en/

Run your project: npm run dev

Run on your browser Local: http://localhost:5173/

To Create TailwindCSS React Vite Project

Open up your terminal and bootstrap a new React Vite App by: npm create vite@latest my-project -- --template react

Then go to that project folder, and write this command via terminal from your project folder: npm install -D tailwindcss postcss autoprefixer

Then install tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files: npx tailwindcss init -p

Then add the paths to all your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Then add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

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

Run your project: npm run dev

Run on your browser Local: http://localhost:5173/

(For more details, visit: https://tailwindcss.com/docs/guides/vite )

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh