Introduction to Tailwind CSS at the IM Tech Meetup - May 2022 covering CSS Frameworks. Ilesh Mistry goes through the elements within Tailwind CSS, how to set it up, documentation and a quick demo. You can view this on his YouTube channel - https://www.youtube.com/watch?v=hhG7GDnJuqI

1. Intro to Tailwind CSS – May 2022

2. WHO AM I?
Intro to Tailwind CSS
2 @ileshmistry | @IM_TechMeetup
IM Tech Meetup
ILESH MISTRY
(CMS SPECIALIST & KONTENT
MVP) CONTACT ILESH
@ileshmistry /@IM_TechMeetup
SUBSCRIBE TO MY YOUTUBE
CHANNEL

3. WHAT I’LL BE COVERING?
3
• What is Tailwind CSS?
• Why use it?
• Quick demo with configuration
• Takeaways
@ileshmistry | @IM_TechMeetup
IM Tech Meetup
Intro to Tailwind CSS

4. WHAT IS TAILWIND CSS?
4
• It’s a utility-first CSS framework allowing you to quickly build user interfaces
• Predefined utility classes that you can use for common CSS styling
@ileshmistry | @IM_TechMeetup
IM Tech Meetup
Intro to Tailwind CSS

5. WHAT IS TAILWIND CSS?
5
• It’s a utility-first CSS framework allowing you to quickly build user interfaces
• Predefined utility classes that you can use for common CSS styling
@ileshmistry | @IM_TechMeetup
IM Tech Meetup
Intro to Tailwind CSS

6. WHY USE IT?
6
• As it’s utility-first, you don’t have to worry about common issues with CSS classes and changes
on projects
• Scans all HTML, JS, TS, etc... files and writes them out into a static CSS file
• Smaller bundle sizes, as it only ships what you are using and removes unwanted CSS 💪🏽
• Ideal to use on both small and large projects
• Easy to use and understand the framework and has an awesome documentation 🏽
• Easy to extend it using Tailwind config
@ileshmistry | @IM_TechMeetup
IM Tech Meetup
Intro to Tailwind CSS

7. WHY USE IT?
7
• It uses the latest CSS features (CSS Grid,
Transform etc…) and has dark mode! 🏽🏽
• If you use VS Code, you will love the
Tailwind CSS IntelliSense extension ❤️
• Works with CSS Preprocessors like SASS and
LESS
• Biggest thing for me is convenience and speed
of delivery
@ileshmistry | @IM_TechMeetup
IM Tech Meetup
Intro to Tailwind CSS

8. CONFIGURATION
8
• Different ways to install Tailwind CSS.
You can use the Tailwind Installation Guide to follow these steps…
• The quickest way is using the Tailwind CLI
> npm install -D tailwindcss
• Add the tailwind.config.js
> npx tailwindcss init
• Configure the paths for all your files e.g. HTML, JS, TS, SCSS etc…
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: { extend: {}, },
plugins: [],
}
@ileshmistry | @IM_TechMeetup
IM Tech Meetup
Intro to Tailwind CSS

9. CONFIGURATION
9
• Include the Tailwind directives in your CSS input file
@tailwind base; @tailwind components; @tailwind utilities;
They provide the core category layers to your CSS file so you can use or override them
• You can add a build process to convert all the input to an output CSS file
> npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
• Use the output CSS file in your website or application
• Start using Tailwind CSS 😍
@ileshmistry | @IM_TechMeetup
IM Tech Meetup
Intro to Tailwind CSS

10. TAKEAWAYS
10
• Once you start using it, I feel you will not want to turn back to traditional CSS
• Smaller bundle sizes, as it only ships what you are using and removes unwanted CSS
• Super convenience to use and allows for speedy delivery
• VS Code IntelliSense extension is an awesome advantage
• Awesome documentation
• Easy to install and get going
@ileshmistry | @IM_TechMeetup
IM Tech Meetup
Intro to Tailwind CSS

11. THANK YOU
11
CONTACT ILESH
@ileshmistry
@IM_TechMeetup
ILESH MISTRY
(CMS SPECIALIST & KONTENT
MVP)
@ileshmistry | @IM_TechMeetup
IM Tech Meetup
SUBSCRIBE –
IM Tech Meetup
Intro to Tailwind CSS