DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Inad Hussein
Inad Hussein

Posted on

Getting started with Tailwind CSS - Real quick!

You have heard all the great things about Tailwind CSS but getting started seems a bit too much? Well, this article for you.

I have created a quickstart repo with the necessary tools so you don't have to set up and configure TailwindCSS for every project.

1. Clone the repo

We start by cloning this quickstart repo and changing the directory to that folder

git clone https://github.com/inerds/tailwind-quickstart.git'
cd tailwind-quickstart
Enter fullscreen mode Exit fullscreen mode

2. Install dependencies

This will install the required packages such as PostCSS, live-server ..etc

npm install
Enter fullscreen mode Exit fullscreen mode

3. Fire up a live server for preview

live-server public
Enter fullscreen mode Exit fullscreen mode

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.

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.

npm run watch
Enter fullscreen mode Exit fullscreen mode

Enjoy Tailwinding!

Top comments (0)

πŸ‘‹ Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: