1. Install Tailwind
terminal: npm init -y (to create package.json)
terminal: npm install -D tailwindcss
2. Create Tailwind config file
terminal: npx tailwindcss init
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
3. Create the input css file with tailwind defaults
create /src/styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;
4. Create the public folder and build output css file
create /public
create /public/img (if you want images)
create /public/index.html (for your base html)
go to package.json / scripts
"build-css": "tailwindcss -i ./src/input.css -o ./public/output.css"
terminal: npm run build-css
5. Run the server
terminal: npm install live-server -g
terminal: live-server public
6. Customize Tailwind
edit tailwind.config.css
extend: {
colors: {
primary: ‘#FF6363'
}
}
terminal: npm run build-css
Other Notes: