Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hasinhayder/tailwind-boilerplate
Tailwind CSS 3 + Vite Boilerplate
https://github.com/hasinhayder/tailwind-boilerplate
boilerplate tailwind tailwind-css tailwindcss vite vitejs
Last synced: 2 months ago
JSON representation
Tailwind CSS 3 + Vite Boilerplate
- Host: GitHub
- URL: https://github.com/hasinhayder/tailwind-boilerplate
- Owner: hasinhayder
- License: mit
- Created: 2021-03-09T20:22:54.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-04-02T13:54:44.000Z (over 1 year ago)
- Last Synced: 2024-09-29T10:39:57.117Z (3 months ago)
- Topics: boilerplate, tailwind, tailwind-css, tailwindcss, vite, vitejs
- Language: HTML
- Homepage: https://tailwind-css-boilerplate.netlify.app/
- Size: 428 KB
- Stars: 167
- Watchers: 8
- Forks: 44
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwind CSS Boilerplate
[![Netlify Status](https://api.netlify.com/api/v1/badges/8dbea3dc-da9d-4524-ba9f-aad17785f152/deploy-status)](https://app.netlify.com/sites/tailwind-css-boilerplate/deploys)
Setting up a tailwind css based project needs to install the tailwindcss npm package, postcss and autoprefixer - it also requires to configure a tailwind.config.js as well as postcss.config.js (optional, if you're planning to use postcss) and then configure those files manually.
And finally for building the production code with tree-shaking (removing unused css from your project and keeping only what is required) you need to configure the purge settings in your tailwind configuration. For someone new to tailwind and for others who regularly use tailwind in their projects, these are boring jobs and you have to do it repeatedly for every project (or learn how to do it if someone is just starting with tailwind)
So this boilerplate has all the configuration to save your time from this boring configurtion tasks (and from gogling many things)
Use this boilerplate as the starting point for your JAMstack + **Tailwind CSS** based projects.
### start
```sh
git clone this_repository
cd this_directory
yarn
yarn dev
```### build
```sh
yarn build
```then grab everything from the dist folder
### change server port
Just change the port number in `vite.config.js` file
```javascript
export default {
plugins: [],
server: {
open: '/index.html',
port: 3116, //< -change this
}
}```
### configure tailwind
There is a `tailwind.config.js` file with `purge` instructions and extra colors, feel free to customize it according to your need