/html-tailwindcss-boilerplate

Primary LanguageJavaScript

Tailwind Boilerplate

A barebones but configurable starter project for playing around with Tailwind in a proper PostCSS environment.

Changes include:

  • stripped down the playground homepage for getting started quickly
  • imported base.css and custom.css files for adding custom styles with @apply
  • font family, text sizes, and screens ready to be configured in tailwind.config.js
  • replaced color palette with theme-ready lt/md/dk colors
  • moved CSS files into /css folder
  • added screen for print styles
  • reorganized serve and build tasks
  • implemented custom CSS linting with Stylelint

To get started:

  1. Clone the repository:

    clone this repo

cd tailwindcss-playground

  2. Install the dependencies:

    # Using npm
npm install

# Using Yarn
yarn

  3. Start the development server:

    # Using npm
npm run serve

# Using Yarn
yarn run serve

    Now you should be able to see the project running at localhost:8080.

  4. Open public/index.html in your editor and start experimenting!

Building for production

Even though this isn't necessarily a starter kit for a proper project, we've included an example of setting up both Purgecss and cssnano to optimize your CSS for production.

To build an optimized version of your CSS, simply run:

# Using npm
npm run production

# Using Yarn
yarn run production

compile you css file

npx tailwindcss build ./public/css/tailwind.css -o ./public/build/tailwind.css --watch

After that's done, check out ./public/build/tailwind.css to see the optimized output.