Tailwind Quickstart (Coming Soon)

Caution

This tutorial is a work in progress. You can try it, but it might not be done yet.

Want to contribute to it? Visit our GitHub repo.

This tutorial assumes you’re already familiar with HTML, CSS, JS, and npm. It also assumes you know what Tailwind is for.

Local Setup

First, visit the Tailwind training ground repo. Press the green Code button and click Download ZIP. Unzip the file and then open it in your editor. Then, run this command in the terminal to install the packages listed in package.json.

npm install

Then run this command to start the dev server.

npm run dev

This command converts src/input.css into src/output.css. It’ll update the file every time you save. Use Ctrl + C to stop this process.

Open the index.html file in your browser. The web page should say Hello World. You can also use the Live Preview extension to open up index.html on localhost:3000.

In your editor, you’ll see several files. However, for now you’ll mainly be working in src/input.css.