Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fless-lab/tailwind-integration-starter
Starter project for integrating Tailwind CSS with PostCSS, featuring custom configuration and live reloading.
https://github.com/fless-lab/tailwind-integration-starter
Last synced: 3 days ago
JSON representation
Starter project for integrating Tailwind CSS with PostCSS, featuring custom configuration and live reloading.
- Host: GitHub
- URL: https://github.com/fless-lab/tailwind-integration-starter
- Owner: fless-lab
- License: mit
- Created: 2024-07-30T19:37:20.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-07-30T19:44:34.000Z (4 months ago)
- Last Synced: 2024-07-30T23:58:33.550Z (4 months ago)
- Language: HTML
- Size: 22.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwind Integration Starter
This is a starter project for integrating Tailwind CSS with PostCSS, allowing you to use custom variables and other PostCSS features in your Tailwind CSS setup.
## Getting Started
### Prerequisites
- Node.js and npm installed on your machine.
### Installation
1. **Clone the repository:**
```bash
git clone https://github.com/fless-lab/tailwind-integration-starter.git
cd tailwind-integration-starter
```
2. **Install dependencies:**
```bash
npm install
```
### Project Structure
```
tailwind-integration-starter/
├── src/
│ ├── styles.css
│ └── index.html
├── dist/
│ └── styles.css (generated)
├── tailwind.config.js
├── postcss.config.js
└── package.json
```
- **src/styles.css**: This is where you import Tailwind CSS and add your custom styles.
- **src/index.html**: A sample HTML file to demonstrate the usage of Tailwind CSS.
- **dist/styles.css**: The output CSS file generated by PostCSS.
### Usage
#### Building CSS
To build the CSS file with Tailwind and PostCSS:
```bash
npm run build:css
```
#### Watching for Changes
To automatically rebuild the CSS file when you make changes:
```bash
npm run watch:css
```
### Customization
- **Tailwind Config (`tailwind.config.js`)**: You can customize your Tailwind setup, such as extending the theme, adding plugins, etc.
- **PostCSS Config (`postcss.config.js`)**: Configure PostCSS plugins as needed.
### Adding Custom Styles
Add your custom styles in `src/styles.css`. You can use Tailwind's utilities or write your own CSS.
### License
This project is licensed under the MIT License.