From 0e11d1a6e85370d21d5f8c358034fb07e863ec6e Mon Sep 17 00:00:00 2001 From: richardevcom <17192512+richardevcom@users.noreply.github.com> Date: Fri, 20 Aug 2021 15:18:28 +0300 Subject: [PATCH] Update README.md --- README.md | 74 +++++++++++++++++++++++++------------------------------ 1 file changed, 34 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index 2fdfa49..247984d 100644 --- a/README.md +++ b/README.md @@ -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 git@github.com:salttechno/tailwindcss-boilerplate.git - - cd + git clone git@github.com: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 + ```