Skip to content

Instantly share code, notes, and snippets.

@iKunalmathur

iKunalmathur/1-CLI

Last active February 12, 2022 07:07
Show Gist options
  • Save iKunalmathur/1878af2952d572691bea0c78204ca8b1 to your computer and use it in GitHub Desktop.
Save iKunalmathur/1878af2952d572691bea0c78204ca8b1 to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind 3 Starter 2022
Raw
1-CLI
npm init -y
npm install -D tailwindcss @tailwindcss/typography @tailwindcss/forms @tailwindcss/line-clamp @tailwindcss/aspect-ratio
npx tailwindcss init
Raw
2-tailwind.config.js
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [
require("@tailwindcss/typography"),
require("@tailwindcss/forms"),
require("@tailwindcss/aspect-ratio"),
require('@tailwindcss/line-clamp'),
],
}
Raw
3-package.json
...
"scripts": {
"dev": "npx tailwindcss -i ./src/tailwind.css -o ./dist/output.css --watch"
},
...
Raw
4-tailwind.css
/* src/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base{
}
@layer components{
}
@layer utilities{
}
Raw
5-index.html
<!-- src/index.html -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment