create-tweb-lp

Boilerplate landing page TWEB com Tailwind CSS v4. Cria o projeto direto na pasta do localhost (XAMPP/Apache).

Uso

npx create-tweb-lp

CLI pergunta:

1. Nome do projeto → vira a pasta e a URL (http://localhost/nome/)
2. Caminho do localhost → detecta automaticamente XAMPP/htdocs; confirme ou troque

Após responder, o CLI:

• Copia todos os arquivos do template
• Roda npm install (instala tailwindcss)
• Gera o CSS inicial (npm run build)
• Mantém o terminal aberto em watch mode (npm run dev)

Fluxo de trabalho

npx create-tweb-lp
        │
        ▼
  Terminal fica aberto → Tailwind compila em tempo real
        │
        ▼
  Edite index.php no editor → css/styles.css atualiza sozinho
        │
        ▼
  Projeto finalizado? Ctrl+C para parar o watch
        │
        ▼
  npm run build   ← gera CSS minificado para produção

Estrutura do projeto gerado

meu-projeto/
├── css/
│   ├── tailwind.css          # tema (edite aqui: cores, fonte)
│   ├── styles.css            # gerado pelo CLI — não editar
│   └── plugins.min.css       # plugins externos (Swiper, etc.)
├── js/
│   ├── tweb.js               # scripts do projeto
│   └── plugins.min.js        # plugins externos minificados
├── img/                      # imagens (logo, banner, etc.)
├── svg/                      # ícones SVG
├── index.php                 # página principal
├── politica-de-cookies.php
├── politica-de-privacidade.php
└── package.json

Personalização

Cores e fonte — css/tailwind.css

@import "tailwindcss";

@theme {
  --font-sans: "Outfit", sans-serif;
  --color-accent: #C52127;       /* cor principal */
  --color-accent-dark: #A41E23;  /* hover / sombra */
}

Trocar cor = editar essas duas variáveis. CSS compila automaticamente no watch.

Scripts

| Comando | Quando usar | |---------|-------------| | npm run dev | Durante o desenvolvimento — watch mode, compila ao salvar | | npm run build | Ao finalizar o projeto — CSS minificado para produção |

Requisitos

• Node.js ≥ 16
• XAMPP (ou outro servidor local com PHP)