Postcss Tailwind TS Vite Boilerplate

A starter frontend boilerplate built with:

• Vite
• Postcss
• Tailwind
• TypeScript
• ESLint
• Prettier
• Stylelint

This also uses husky and lint-staged for running pre-commit checks.

Features

• Support for both TypeScript and JavaScript as needed.
• Use popular tailwind plugin; eg: @tailwindcss/typography, @tailwindcss/forms, @tailwindcss/line-clamp, prettier-plugin-tailwindcss
• Add many usefull postcss plugin; eg: cssnano, autoprefixer, postcss-preset-env, postcss-extend, postcss-mixins, postcss-import, postcss-simple-vars
• Minification of TS/JS and CSS processed files.
• May be extended to be used with React, Vue.js, or Angular.

Prerequisites

• NodeJS
• PNPM

Folder structures

src
├── assets
├── components
├── global
├── utils
├── ...
├── vite-env.d.ts
└── main.ts

public
├── ...
└── vite.svg

Configuration

You may change the configuration for Vite within the vite.config.ts file.

Setup

Install dependencies

Run:

  pnpm install

Development

Server

Run:

  pnpm run dev

Production build

Run:

  pnpm run build

Will output all build files into the dist folder.

Formating

Scripts (Prettier)

Run:

  pnpm run format:scripts

All

Run:

  pnpm run format

Linting

Scripts (ESLint)

Run:

  pnpm run lint:scripts

Styles (StyleLint)

Run:

  pnpm run lint:styles

License

MIT