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:
Scroll to top