[OUTDATED] How to install Tailwind CSS
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!
Thank you for creating this!
This is amazing. Thank you!