-
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f305427
commit 0e11d1a
Showing
1 changed file
with
34 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,6 @@ | ||
# Tailwind CSS Boilerplate | ||
# Coming Soon Boilerplate | ||
|
||
Tailwind CSS boilerplate for HTML projects. Bare-bones HTML starter template with Tailwind CSS, PostCSS, Gulp, Browsersync & Imagemin. | ||
Coming soon boilerplate for HTML projects. Bare-bones HTML starter template with Tailwind CSS, PostCSS, Gulp, Browsersync & Imagemin. | ||
|
||
The main purpose of this boilerplate is to simplify the configuration of Tailwind CSS for beginners. | ||
|
||
|
@@ -9,57 +9,51 @@ The main purpose of this boilerplate is to simplify the configuration of Tailwin | |
1. Clone the repository: | ||
|
||
```bash | ||
git clone [email protected]:salttechno/tailwindcss-boilerplate.git <YOUR_PROJECT_NAME> | ||
|
||
cd <YOUR_PROJECT_NAME> | ||
git clone [email protected]:richardevcom/unknown-coming-soon.git | ||
``` | ||
|
||
Or else simply download boilerplate's zip file from [this link](https://github.com/salttechno/tailwindcss-boilerplate). | ||
2. Install the dependencies: | ||
Open dir: | ||
```bash | ||
cd unknown-coming-soon | ||
``` | ||
NPM | ||
```bash | ||
# if you are using npm | ||
npm install | ||
# OR if you are using Yarn | ||
``` | ||
Yarn | ||
``` | ||
yarn | ||
``` | ||
|
||
3. Start the development server: | ||
NPM dev server | ||
```bash | ||
# if you are using npm | ||
npm run dev | ||
# OR if you are using Yarn | ||
yarn run dev | ||
``` | ||
Yarn dev server | ||
``` | ||
yarn dev | ||
``` | ||
|
||
Now you should be able to see the project running at [localhost:3000](http://localhost:3000). | ||
|
||
4. Open `./index.html` in your editor (VS Code recommended) and start editing! | ||
## Optimizing for production | ||
Tailwind CSS output needs to be optimized for the production use. The development version for the CSS file is almost 4MB which is not good for production websites. [Read this for more details](https://tailwindcss.com/docs/optimizing-for-production). This boilerplate **helps you generate the production version** of your CSS file easily & quickly. | ||
We have configured `purge` option for PostCSS & Tailwind CSS. To build optimized version of your custom CSS, simply run: | ||
```bash | ||
# if you are using npm | ||
npm run build | ||
# OR if you are using Yarn | ||
yarn run build | ||
``` | ||
For optimizing your images, simply run: | ||
```bash | ||
# if you are using npm | ||
npm run build-images | ||
4. Build minified CSS: | ||
NPM build css | ||
```bash | ||
npm run build | ||
``` | ||
Yarn build css | ||
``` | ||
yarn build | ||
``` | ||
|
||
# OR if you are using Yarn | ||
yarn run build-images | ||
``` | ||
5. Build optimized images: | ||
NPM build images | ||
```bash | ||
npm run build-images | ||
``` | ||
Yarn build images | ||
``` | ||
yarn build-images | ||
``` |