Code Monkey home page Code Monkey logo

tailwind-sass-starter's Introduction

Tailwind and Sass Starter Template

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

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.

Installation

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.

During 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, if you change folder structure in your project.

Contributing

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

License

MIT

tailwind-sass-starter's People

Contributors

dependabot[bot] avatar mufidu 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.