Tailwind CSS 101

There’s no going back once I got started with Tailwind CSS as it made styling so much simpler. I found it to be more productive than other CSS frameworks. These are my convincing points for you:

1. There’s no need to remember custom class names and go back and forth between separate HTML & CSS Files as it uses standard “shortened” class names and the extension “Tailwind CSS IntelliSense” made it a lot easier by auto-completing, one can get used to writing the class names by self with some practice itself.
2. The documentation is amazing, the landing page shows the real-time effect of its use and the search button is really handy.
3. Way shorter than the Inline CSS Classes due to the utility-based approach which also makes it way more customizable and flexible (the apply directive comes in handy in such situations).
4. No matter how many classes are added the rendering speed or bundle size (kept minimal by removing unused classes enabling faster reloads) doesn't get affected.
5. The components become independent and there’s no need to worry about breaking existing templates due to a small change in any other part.
6. The classes might appear to duplicate after a point of time, and the use of any JS framework prevents this.
7. Responsive styling has also been dealt with effectively here by the presence of “breakpoints”.
8. The background behind how the project was taken up by the founders to overcome a particular problem they faced is really intriguing as well:)

Note that it shouldn’t be one’s first intro to CSS because CSS is amazing itself!

Setting up Tailwind CSS :

Starter Template - https://github.com/nk7608/Tailwind_Starter_Template.git > use “npm i” to install the node modules

Alternatively - Follow these steps:

1. npm init -y //This initializes the directory as a Node.js Project
2. npm install -D tailwindcss postcss autoprefixer vite // installs required packages
3. npx tailwindcss init -p //installs postcss and tailwindcss config files
4. Create a CSS file “input.css”, add/link it in the HTML file and add the following to the newly created CSS file:

(@)tailwind base;

(@)tailwind components;

(@)tailwind utilities;

1. In your tailwind.config.js file, replace content:[ ] with content:[””]*
2. Add “start”: “vite” to your scripts in package.json
3. Run npm start command to start a dev server

Commonly used Tailwind utility classes:

1. font-weight: Utilities for controlling the font-weight of an element. Ex., font-bold ⇒ font-weight: 700; Link to read more - https://tailwindcss.com/docs/font-weight
2. tracking-weight: Utilities for controlling the tracking (letter spacing) of an element. Ex., tracking-normal ⇒ letter-spacing: 0em; Link to read more - https://tailwindcss.com/docs/letter-spacing
3. margin-align: Utilities for controlling an element's margin. Ex., m-auto ⇒ margin: auto; Note that -ve margin values are also usable, Link to read more - https://tailwindcss.com/docs/margin
4. padding-value: Utilities for controlling an element's padding. Ex., p-px ⇒ padding: 1px; Link to read more - https://tailwindcss.com/docs/padding
5. border-radius: Utilities for controlling the border radius of an element. Ex., rounded-xl ⇒ border-radius: 0.75rem (12px); Link to read more - https://tailwindcss.com/docs/border-radius
6. text-value: Utilities for controlling the font size of an element. Ex., text-sm ⇒ font-size: 0.875rem (14px) and line-height: 1.25rem (20px) ; Link to read more - https://tailwindcss.com/docs/font-size
7. space-between: Utilities for controlling the space between child elements. Ex., space-x-0 ⇒ margin-left: 0px; Note that spacing starts from the 2nd element and is useful in navigation, it has multiple alternatives like flex properties. Link to read more - https://tailwindcss.com/docs/space
8. border -style, -width, -color: Utilities for controlling the style, width and color of an element's borders. Ex., border border-4 border-black. Link to read more - https://tailwindcss.com/docs/border-width
9. divide-width: Utilities for targeting a particular part of the border to style it. Has diff attributes like borders. Link to read more - https://tailwindcss.com/docs/divide-width

How to custom-change the classes in Tailwind CSS:

1. Square-bracket notation: used for providing custom values like 89rem/vh, etc. syntax: utility-[”size”]
2. Pseudo-classes like hover, focus(appear on clicking tab), and active(on clicking a button) can be combined with regular Tailwind utilities. Ex., hover:bg-red-200 ⇒ background: red-200;
3. (@)apply Directive: used to apply custom CSS, can overwrite the CSS added by utilities class by overwriting/adding our custom styling afterward in the HTML as well as the CSS file.
4. (@)layer Directive: enables a custom CSS class to be added to that custom layer(base, components, or utilities) however modifying the config file comes with a cost of maintainability which gets compromised so should be used only to prevent repeatable code/classes.
5. Customization using config file in CSS: The breakpoint default values can be changed in the config file. Syntax: npx tailwindcss init custom_filename - - full Look for the property to be changed in the theme object, come back original config file, and add the custom property using objects. Ex., for changing the font size which is found in the font in the theme, it’d look like this in extend: theme: { extend: { font: { 13: 3rem }, }, } Note that for adding custom breakpoints, they’re added directly to the theme and not via extend.

Projects to practice:

1. Try to clone some basic website pages like Starbucks, etc.
2. Try to transform any of your existing project applications styled in CSS with TailwindCSS.

Thanks for reading this. Hope this helps on your journey and let me know if you have any questions.