Tailwind and Sass Starter Template

A plain starter template for using Tailwind with Sass (without Next, Gatsby, Laravel, etc).

View on Github

Why Sass?

I personally like using Tailwind altogether with Sass because it makes me able to nest the styles. Also, the @mixin and @extend features really help me to avoid writing the same styles again and again, so the stylesheet is a bit more readable.


Use the package manager npm to use this template, or hit the "Use this template" button above.

npm install

Running for development

npm  start

Run the command above, and you are ready to go! To build your website, edit `index.html` to your liking, and style it by editing and/or adding SCSS files in the `sass` folder. Your SCSS files will be automatically processed and outputted to the `css` folder, upon every save.

In development CSS output is not optimized since it will be slow to compress and purge everything on every change.

Building for production

npm run build

In production, CSS output in the `css` folder will be optimized using Tailwind purging and cssnano compression. Don't forget to update the glob pattern in `purge` option in [tailwind.config.js](https://github.com/mufidu/tailwind-sass-starter/blob/main/tailwind.config.js), if you change folder structure in your project.


Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.