Learn to Code via Tutorials on Repl.it!

← Back to all posts
How to install Tailwind CSS

The infromation in this post is based off of 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.

Read more here.

Not using the CDN

Deafult CSS

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

Link into your HTML with...

Custom CSS

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

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

Or make it run automatically.

Custom configuration

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

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

or to 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 = {

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

Again update the main css file with...

or to watch...

Read more about Jit here

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