A simple starter project for playing around with Tailwind CSS+UI in a proper PostCSS environment. This template also has an html include feature, so there aren't many duplicate templates.
Clone the repository using this command:
git clone https://github.com/lrfahmi/tailwind-playground.git tailwind-playground
cd tailwind-playground
Then, install the dependencies:
# Using npm
npm install --also=dev
# Using Yarn
yarn
Finaly, Start the development server:
# Using npm
npm run serve
# Using Yarn
yarn serve
Now you should be able to see the project running at localhost:8080.
Create or open html files in .html
folder in your editor to start experimenting. You don't need to change the html file that is in the public
folder, it is generated automatically. Unless you want to add resources, such as js, img to a public folder.
You can add an html file with content as below:
<!doctype html>
<html lang="en">
<head>
${require('./_head.html')}
</head>
...
Even though this isn't necessarily a starter kit for a proper project, we've included an example of setting up 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 production
After that's done, check out ./public/build/tailwind.css
to see the optimized output.