siestamark

siestamark

Modern CSS with Tailwind: minor formatting suggestions

Congratulations on a fine book on TailwindCSS. I appreciate your very helpful work. It is very timely and nicely done.

In the Utilities section of Chapter 2, you have a callout for “The Leading Dot”. I understand that this is consistent with the concept of a CSS class description. However, as a reader of your text and as a developer using TailwindCSS, I am not defining these TailwindCSS classes, but just using them, which disallows typing their leading dot. It would be less distracting for me if all those dots just went away. Your blue bold lowercase is enough to set these concepts apart for me.

Also, when showing a named optional utility family, I think it would make more logical sense to pull the dash into the curly braces. For example, rather than showing text-{size}-{color}-{level} to indicate a family of text sizes, colors, and levels respectively, it would be easier on my eyes if this were written text{-size}{-color}{-level}, as everything within each {…} would logically go together. If no size were specified, there would be no dash for size; if no color were specified, there would be no dash for color; etc.

Most Liked

noelrappin

noelrappin

Author of Modern Front-End Development for Rails

Thanks for the feedback. I went back and forth on the both of those.

In the second case, I decided to match the way the Tailwind documentation does patterns, it keeps the dashes outside the braces.

The first case, I also thought I was matching the Tailwind documentation, but either they changed the formatting there, or I’m having a memory lapse, because they are not currently consistently using the leading dot to define classes, though they still use it in some places.

Where Next?

Popular Pragmatic Bookshelf topics Top

mikecargal
Title: Hands-On Rust (Chap 8 (Adding a Heads Up Display) It looks like ​.with_simple_console_no_bg​(SCREEN_WIDTH*2, SCREEN_HEIGHT*2...
New
AndyDavis3416
@noelrappin Running the webpack dev server, I receive the following warning: ERROR in tsconfig.json TS18003: No inputs were found in c...
New
jgchristopher
“The ProductLive.Index template calls a helper function, live_component/3, that in turn calls on the modal component. ” Excerpt From: Br...
New
digitalbias
Title: Build a Weather Station with Elixir and Nerves: Problem connecting to Postgres with Grafana on (page 64) If you follow the defau...
New
brunogirin
When running tox for the first time, I got the following error: ERROR: InterpreterNotFound: python3.10 I realised that I was running ...
New
adamwoolhether
Is there any place where we can discuss the solutions to some of the exercises? I can figure most of them out, but am having trouble with...
New
taguniversalmachine
It seems the second code snippet is missing the code to set the current_user: current_user: Accounts.get_user_by_session_token(session["...
New
mert
AWDWR 7, page 152, page 153: Hello everyone, I’m a little bit lost on the hotwire part. I didn’t fully understand it. On page 152 @rub...
New
New
dachristenson
I’ve got to the end of Ch. 11, and the app runs, with all tabs displaying what they should – at first. After switching around between St...
New

Other popular topics Top

AstonJ
Or looking forward to? :nerd_face:
498 13326 269
New
AstonJ
I’ve been hearing quite a lot of comments relating to the sound of a keyboard, with one of the most desirable of these called ‘thock’, he...
New
PragmaticBookshelf
Learn different ways of writing concurrent code in Elixir and increase your application's performance, without sacrificing scalability or...
New
New
Maartz
Hi folks, I don’t know if I saw this here but, here’s a new programming language, called Roc Reminds me a bit of Elm and thus Haskell. ...
New
mafinar
This is going to be a long an frequently posted thread. While talking to a friend of mine who has taken data structure and algorithm cou...
New
AstonJ
If you want a quick and easy way to block any website on your Mac using Little Snitch simply… File > New Rule: And select Deny, O...
New
First poster: bot
zig/http.zig at 7cf2cbb33ef34c1d211135f56d30fe23b6cacd42 · ziglang/zig. General-purpose programming language and toolchain for maintaini...
New
AnfaengerAlex
Hello, I’m a beginner in Android development and I’m facing an issue with my project setup. In my build.gradle.kts file, I have the foll...
New
RobertRichards
Hair Salon Games for Girls Fun Girls Hair Saloon game is mainly developed for kids. This game allows users to select virtual avatars to ...
New

Sub Categories: