https://github.com/alimuhammadofficial/tailwindcss-starter-template
https://github.com/alimuhammadofficial/tailwindcss-starter-template
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/alimuhammadofficial/tailwindcss-starter-template
- Owner: AliMuhammadOfficial
- Created: 2025-03-07T00:18:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-07T00:21:10.000Z (over 1 year ago)
- Last Synced: 2025-04-05T05:21:11.034Z (over 1 year ago)
- Language: HTML
- Size: 13.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TailwindCSS Starter Template
A lightweight starter template for building websites with TailwindCSS and Vite.
## What is TailwindCSS?
TailwindCSS is a utility-first CSS framework that lets you build designs directly in your HTML. Instead of writing custom CSS, you use predefined classes like `text-blue-500`, `p-4`, or `flex` to style your elements.
### Key Benefits
- **No more naming CSS classes**: Use Tailwind's predefined utility classes
- **Consistency**: Built-in design system for colors, spacing, and more
- **Responsive design**: Easily make your site work on different screen sizes with classes like `md:flex`
- **Customizable**: Extend or modify the default theme to match your design needs
## Getting Started
1. Clone this repository
```
git clone git@github.com:AliMuhammadOfficial/TailwindCSS-Starter-Template.git
cd TailwindCSS-Starter-Template
```
2. Install dependencies:
```
npm install
```
3. Start the development server:
```
npm run dev
```
4. Open your browser and navigate to `http://localhost:5173`
## Basic Usage
### Colors
```html
Blue text
Green background
```
### Spacing
```html
Padding on all sides
Margin on all sides
Padding: vertical 2, horizontal 4
```
### Typography
```html
Large bold title
Small gray text
```
### Layout
```html
Left item
Right item
```
### Responsive Design
```html
```
## Project Structure
- `index.html` - Main HTML file
- `src/style.css` - CSS file that imports Tailwind
- `vite.config.js` - Vite configuration
- `public/` - Static assets
## Commands
- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview production build locally
## Learn More
- [TailwindCSS Documentation](https://tailwindcss.com/docs)
- [Vite Documentation](https://vitejs.dev/guide/)