The information in this post is based on here.
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.
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">
To have custom CSS and configuration, create a style.css containing...
style.css
@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
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.
or to watch...
Read more about configs here.
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 = {
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...
Read more about Jit here
This is my first tutorial post, if there are any errors, please notify me! Thanks for reading!
This is amazing. Thank you!
[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
All you need to do is to add the following to your HTML file.
Not using the CDN
Deafult CSS
Install the modules
Run this command in the shell to generate the default CSS file.
Link into your HTML with...
Custom CSS
To have custom CSS and configuration, create a
style.csscontaining...Run this command to update the main CSS with the custom styles.
Or make it run automatically.
Custom configuration
In order 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...
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...
This is my first tutorial post, if there are any errors, please notify me! Thanks for reading!
This is amazing. Thank you!