The latest articles on Forem by Inad Hussein (@inerds). https://forem.com/inerds https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F498469%2Fd51e1543-6547-4bac-8f6f-737f5b55981d.jpeg https://forem.com/inerds en Inad Hussein Sun, 25 Oct 2020 10:02:06 +0000 https://forem.com/inerds/getting-started-with-tailwind-css-real-quick-4mco https://forem.com/inerds/getting-started-with-tailwind-css-real-quick-4mco <p>You have heard all the great things about Tailwind CSS but getting started seems a bit too much? Well, this article for you.</p> <p>I have created a quickstart repo with the necessary tools so you don't have to set up and configure TailwindCSS for every project. </p> <h4> 1. Clone the repo </h4> <p>We start by cloning this quickstart repo and changing the directory to that folder<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>git clone https://github.com/inerds/tailwind-quickstart.git' cd tailwind-quickstart </code></pre> </div> <h4> 2. Install dependencies </h4> <p>This will install the required packages such as PostCSS, live-server ..etc<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>npm install </code></pre> </div> <h4> 3. Fire up a live server for preview </h4> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>live-server public </code></pre> </div> <p>This will start a live-server in the /public folder. You can start editing index.html file and changes will be auto refreshed on the browser.</p> <p>If you are writing CSS run the following watch command and it will watch out for changes in css file in css/tailwind.css and build it to public/css/tailwind.css.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>npm run watch </code></pre> </div> <p>Enjoy Tailwinding! </p> tailwindcss css tutorial