Notes on Tailwind CSS

Last updated on 29 Jun. 2024
Interesting short video giving a fast-paced coverage of pros and cons of Tailwind CSS: Tailwind CSS is the worst…, https://www.youtube.com/watch?v=lHZwlzOUOZ4 by Fireship, around 4 mins, Jan. 2023. 

Seems to be by the same author as above video but has useful quick coverage: Tailwind in 100 Seconds, https://www.youtube.com/watch?v=mr15Xzb1Ook by Fireship, 2 min. 20 secs, Aug. 2021.

Official site: https://tailwindcss.com/ . The explanation part of Tailwind code seems to start with this page: https://tailwindcss.com/docs/utility-first.

Steps I followed to make my first Tailwind (test) project:

  1. In an empty directory, ran 'npm init' and accepted defaults for all except index.js which I changed to index.html
  2. As per https://tailwindcss.com/docs/installation, ran 'npm install -D tailwindcss'. I think I missed out running, 'npx tailwindcss init'. Plan to try that out in a new project later. [29 Jun 2024 update: 'npx tailwindcss init' creates tailwind.config.js file with empty content entry: '  content: [],' in module_exports object. The content entry has to be modified to: '  content: ["./src/**/*.{html,js}"],'.]
  3. Created 'tailwind.config.js' file in project root directory with contents specified in above installation page.
  4. Created src directory and input.css file in it, with only lines in above installation page.
  5. Moved index.html to src directory and changed package.json "main" property to "./src/index.html". [29 Jun 2024 update: The npm init command did not create index.html in this trial. Don't know how earlier notes refer to an existing index.html which was moved to src directory. In this trial, I had to create an index.html file in src directory. Then I modified "main" property in package.json from "index.html" to "./src/index.html". To know more about main property in package.json, see https://docs.npmjs.com/cli/v10/configuring-npm/package-json#main .]
  6. Ran "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch" but did not realize that I need to keep it running. Terminated it with Ctrl+C. [29 Jun 2024 update: Kept 'npx tailwindcss -i ./src/input.css -o ./src/output.css --watch' command running, this time around. It reported warnings about no utility classes being detected in source files.] 
  7. Modified index.html to use output.css stylesheet. [29 Jun 2024 update: I confirmed that the above mentioned warnings are related to no Tailwind CSS (utility) classes being used by index.html at this stage. After I modified index.html to use '<h1 class="text-3xl font-bold underline">Hello world!</h1>' and restarted the above npx tailwindcss command, the above warnings were not shown. ... Was able to make Tailwind CSS class changes in index.html file which were getting picked up and shown by Live Server (though at times, if I caught that correctly, a refresh of the index.html page was needed in browser). VSCode was showing Intellisense help for the Tailwind CSS classes.]
  8. Added "IntelliSense for VS Code" extension - https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss (Ref: https://tailwindcss.com/docs/editor-setup ) .
  9. Added and configured official prettier plugin - https://github.com/tailwindlabs/prettier-plugin-tailwindcss (Ref: https://tailwindcss.com/docs/editor-setup ) [The "// .prettierrc" line in the json file got shown as an error in VSCode. Seems like comments are not supported in JSON files. So have deleted that line.]
  10. Played around with code in index.html and opened it in Live Server. I did not see expected output! Realized that I may need to run "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch" and keep it running. Did that and now the Live Server hosted index.html page showed expected output which changed on index.html page changing to use different Tailwind CSS classes.

------------

Tailwind CSS Full Course for Beginners | Complete All-in-One Tutorial | 3 Hours, by Dave Gray, around 3 hrs., Oct. 2022. Github source code. As I had done my upgrading of HTML and CSS skills (CSS was more of learning as I knew very little of it earlier) using Dave Gray tutorials, I think I will find this to be suitable. I feel the tutorial is slow but thorough (as was the case with the HTML and CSS Dave Gray tutorials). I picked up some useful tips about Live Server extension needing a settings change for Tailwind which I had not known about (video timestamp 5 min. 21 secs.) and about Inline fold extenstion timestamp (inline fold was mentioned in some other video that I had seen too but the extension details were not shown). The source code for the examples being available is a big plus. I tried out running Lesson02 code and it ran smoothly.

-----------------------

12 Jun. 2024 Update

Over past few days, I am getting into Tailwind CSS in a deeper way than my initial very superficial look which is covered in above contents of this post.
...
https://tailwindcss.com/docs/utility-first covers a chat-notification message. In my earlier superficial look, I had tried out a variation of it. It worked as expected.

Recently when I took a closer look at the variation, I saw that the main flexbox was being horizontally centered using Tailwind classes mx-auto and max-w-sm which corresponds to CSS of margin-left: auto; margin-right: auto; and max-width: 24rem/* 384px */;

It does not use justify-center equivalent to CSS justify-content: center, which is what I had learned was to be used for such needs.

Some digging up led to: Using width, max-width and margin: auto;, https://www.w3schools.com/css/css_max-width.asp which explains key points in using this CSS code to center a div's content. It also explains how using max-width instead of width results in better display on window sizes smaller than width/max-width specified.

Using w-96 (24 rem/384 px) instead of max-w-sm in my variation of the Tailwind sample program, works well when window size is greater than 384 px but when window size is smaller that 384 px a horizontal scrollbar appears. Using max-w-sm handles the window size smaller than 384 px by when necessary (window size less than around 260 px) wrapping the text in the second element of the flexbox across multiple lines and shrinking the image. The horizontal scrollbar does not appear. Replaced 'mx-auto max-w-sm' by 'justify-center' and the behaviour seems to be the same.

Note that if I use exactly the same Tailwind classes in my variation as in the Tailwind docs for the sample, the behaviour is better for small window case. The image does not shrink (as flex-shrink: 0 is specified in div wrapper of the image) and text wraps to next line till a particular window size (around 170 px) less than which a horizontal scrollbar appears.

I don't know about whether using margin:auto (on X axis) and max-width is superior to using justify-content: center.
...
Some the Tailwind classes CSS expanded code (which is shown in popup window on hovering the mouse over the Tailwind class in VSCode) is hard to understand. For example:
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem/* 16px */ * var(--tw-space-x-reverse));
    margin-left: calc(1rem/* 16px */ * calc(1 - var(--tw-space-x-reverse)));
}
----
The Tailwind documentation for it: https://tailwindcss.com/docs/space is much better:
"Space Between
Utilities for controlling the space between child elements."
...
space-x-4 > * + * margin-left: 1rem; /* 16px */
----

I could not find a link in the popup for Tailwind class in VSCode that would take me to Tailwind documentation. The Tailwind CSS IntelliSense plugin (extension) which I use does not seem to provide such links: https://tailwindcss.com/docs/editor-setup . So I think one has to manually search for these classes in Tailwind documentation on its website.
...
From: https://tailwindcss.com/docs/box-shadow, "Utilities for controlling the box shadow of an element."

shadow-sm box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
..
shadow-lg box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

[The sample program uses shadow-lg]

First time, for the above page, I could very faintly see shadow-xl and shadow-2xl shadows but I could not the shadow of others including shadow-lg which is used in the sample program. Neither could I spot the shadow in the sample program page on browser. But next time around I could clearly see the shadow for all shadow classes in above page as well as sample program in browser. I don't know what changed. Did some dark mode extension that I use and which I had flipped to both modes the first time around (when I could not see the shadows), trip up something? No idea!

background: rgb(255 122 127 / .4);
...
https://tailwindcss.com/docs/outline-style - "Use outline-none to hide the default browser outline on focused elements." "It is highly recommended to apply your own focus styling for accessibility when using this utility."
...
In Dave Gray tutorial Lesson 2, scroll-mt-40 ('scroll-margin-top: 10rem/* 160px */;') for section id="hero" seems to be needed due to header being sticky. If scroll-mt-40 is not specified, on going to that section via an internal link (<a href="#hero">🚀 Acme Rockets</a>) in the header, the page scrolls in such a way that section id="hero" is aligned to top of window and the sticky header obscures initial part of section id="hero". Similarly appropriate scroll-mt-xx has to be specified for other sections which are linked to via header links like section id="rockets" (uses scroll-mt-20) ... The reference/tutorial pages for scroll-margin-top: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top and https://www.w3schools.com/cssref/css_pr_scroll-margin-top.php have examples without internal links being used. I could not understand the effect of scroll-margin-top in these examples.
...
After going through https://tailwindcss.com/docs/utility-first and part of the next Tailwind docs (guide) pages in detail, I decided to stop the detailed study of guide part of Tailwind docs as it was sucking up too much time. I browsed through the rest of the guide part of the docs so that I have some idea of the features supported. I think it may be more useful for me to go through projects using Tailwind and then look up Tailwind docs when I don't understand some Tailwind class and its usage in the project source code.

Also, I am going through the Dave Gray tutorial in detail as it is quite easy paced. I think I will now finish the Dave Gray tutorial and then move on to studying Tailwind usage in projects.

end 12 Jun. 2024 Update

13 Jun. 2024 Update
Finished the Dave Gray tutorial today.
end 13 Jun. 2024 Update

Comments

Post a Comment

Archive