duncanhunter / tailwind-simple-starter-steps

Tailwind simple starter steps

Make a new folder and cd into it then run git init. Add a .gitignore file and add node_modules as text to the top of the file
Run command npm init -y and replace the script section in the packag.json file this command makes with the below piece of code

  "scripts": {
    "dev": "vite"
  },

Run npm install -D tailwindcss@latest postcss@latest autoprefixer@latest vite
Run npx tailwindcss init -p
Make a new file styles.css file touch styles.css
Add below css to styles.css

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

Make a index.html file touch index.html
Add below HTML to index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <h1 class="text-4xl font-bold text-center text-blue-500">header 2</h1>
</body>
</html>

Run npm run dev
Open browser at http://localhost:3000/

About

Languages

Language:HTML 56.5%Language:JavaScript 35.1%Language:CSS 8.4%