Git Product home page Git Product logo

bad-grandma's Introduction

Tailwind CSS Boilerplate

Tailwind CSS 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.

How to use this Tailwind CSS Boilerplate

  1. Clone the repository:

    git clone [email protected]:salttechno/tailwindcss-boilerplate.git <YOUR_PROJECT_NAME>
    
    cd <YOUR_PROJECT_NAME>

    Or else simply download boilerplate's zip file from this link.

  2. Install the dependencies:

    # if you are using npm
    npm install
    
    # OR if you are using Yarn
    yarn
  3. Start the development server:

    # if you are using npm
    npm run dev
    
    # OR if you are using Yarn
    yarn run dev

    Now you should be able to see the project running at 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. 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:

# if you are using npm
npm run build

# OR if you are using Yarn
yarn run build

For optimizing your images, simply run:

# if you are using npm
npm run build-images

# OR if you are using Yarn
yarn run build-images

bad-grandma's People

Contributors

ittisafur avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.