Hello Tailwind CSS!
History Lesson: Adam Wathan on Utility Classes and Separation of Content.
FYI — this whole 411/Gatsby project is on GitHub so you can enjoy the CSS and various config files . You're welcome.
CSS Linter Unhappy with @apply
With the default Tailwind CSS install we needed to add aglobal.css file to the project. The VS Code CSS linter is unhappy with the @apply directives added there. This can be corrected by giving VC Code some additional rules. See Unknown at rule @apply css(unknownAtRules) #5258.
Prose?
Prose is a typography plugin for Tailwind: @tailwindcss/typography I've added rules in tailwind.config.js to tweak the default Prose styles and colors. Bonus: You can also apply global changes, that cascade with Prose in global.css.
- Prose cheat sheet which provided insight on how to change the color of the list-item-indicator
- The quick brown fox
- jumps over
- the lazy dog.
Ut bibendum dignissim augue at sagittis. Nunc mauris arcu, interdum eu est ut, congue venenatis tellus. Duis mollis congue porttitor.
Custom Pseudo Content/Entities
Pseudo elements won't handle HTML entites or Unicode characters out of the box. Tailwind needs some addition instruction on how to make that happen. You can find that knowledge in tailwind.config.jsand implementation is on the author attribution in the sample below.
Example from Tailwind CSS Home Page
As a learning experience…
“Duty, Honor, Country: Those three hallowed words reverently dictate what you ought to be, what you can be, what you will be. They are your rallying points: to build courage when courage seems to fail; to regain faith when there seems to be little cause for faith; to create hope when hope becomes forlorn.”