THIS INFORMATION IS OUTDATED, SEE HERE FOR OFFICIAL INSTRUCTIONS

The information in this post is based on here.

Using the CDN

I personally do not suggest this option, as it is missing a lot of cool features.

All you need to do is to add the following to your HTML file.

<link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">

Read more here.

Not using the CDN

Deafult CSS

Install the modules

npm install -D [email protected] [email protected] [email protected]

Run this command in the shell to generate the default CSS file.

npx tailwindcss -o tailwind.css

Link into your HTML with...

<link href="/tailwind.css" rel="stylesheet">

Custom CSS

To have custom CSS and configuration, create a style.css containing...

@tailwind base;
@tailwind components;
@tailwind utilities;

Run this command to update the main CSS with the custom styles.

npx tailwindcss -i style.css -o tailwind.css

Or make it run automatically.

npx tailwindcss -i style.css -o tailwind.css --watch

Custom configuration

In order to add components, and have more control, generate the config file.

npx tailwindcss init

Again, use this command to update the main CSS file, it will read the config.

npx tailwindcss -i style.css -o tailwind.css

or to watch...

npx tailwindcss -i style.css -o tailwind.css --watch

Read more about configs here.

Just-in-Time (Jit)

I really suggest jit mode as it saves a lot of effort with the configs, with jit, you do not have to enable modules manually anymore.

To enable, simply add this to your config file. Right under module.exports = {

mode: 'jit',

You'll also need to add purge, which removes excess un-needed CSS.
Here's what I recommend.

purge: [
     './**/*.html',
     './**/*.{js,jsx,ts,tsx,vue}',
   ],

Again update the main CSS file with...

npx tailwindcss -i style.css -o tailwind.css

or to watch...

npx tailwindcss -i style.css -o tailwind.css --watch

Read more about Jit here

---

This is my first tutorial post, if there are any errors, please notify me! Thanks for reading!