Tailwind CSS and Beyond

Tailwind CSS Design
Tailwind CSS Design

Recently, this website of mine was redesigned. The The inspiration comes from this beautiful website. is a stylistic book and implemented using the Tailwind CSS framework.

Now on version 1.0 as of May 13th, 2019. CSS is a tight and compact CSS framework that gives one a myriad of custom design choices.

“Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it’s not a UI kit.” “It doesn’t have a default theme, and there are no built-in UI components.” “On the flip side, it also has no opinion about how your site should look and doesn’t impose design decisions that you have to fight to undo.” Tailwind CSS, Web Page, What is Tailwind?

Tailwind is a utility first It is not utility only. Your HTML will contain many This composite and utility-like nature also allows for easier cache busting opportunities. classes that build up into a complete component.

html 
<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">

The above looks like bad practice but you’ll get used to its utility-like nature very quickly and may end up writing If you are skilled at writing and managing CSS then Tailwind might not be that interesting. to no CSS at all. In repetitive situations we can implement abstractions by extracting components.

11 May 2019 — Written
16 May 2019 — Updated
Thedro Neely — Creator
tailwind-css-and-beyond.md — Article

More Content

Openring

Web Ring

Comments

References

  1. https://thedroneely.com/git/
  2. https://thedroneely.com/
  3. https://thedroneely.com/posts/
  4. https://thedroneely.com/projects/
  5. https://thedroneely.com/about/
  6. https://thedroneely.com/contact/
  7. https://thedroneely.com/abstracts/
  8. https://ko-fi.com/thedroneely
  9. https://thedroneely.com/tags/css/
  10. https://thedroneely.com/tags/framework/
  11. https://thedroneely.com/posts/tailwind-css-and-beyond/#isso-thread
  12. https://thedroneely.com/posts/rss.xml
  13. https://thedroneely.com/images/tailwind-css-and-beyond.png
  14. https://www.edwinmattiacci.com/
  15. https://web.archive.org/web/20200627094231/https://faculty.com/
  16. https://tailwindcss.com/docs/what-is-tailwind
  17. https://tailwindcss.com/
  18. https://thedroneely.com/posts/tailwind-css-and-beyond/#code-block-e98e902
  19. https://tailwindcss.com/docs/extracting-components
  20. https://www.thedroneely.com/posts/tailwind-css-and-beyond.md
  21. https://thedroneely.com/abstracts/golden-sun/
  22. https://thedroneely.com/posts/now-dns-pfsense/
  23. https://thedroneely.com/abstracts/the-fate-of-empires/
  24. https://git.sr.ht/~sircmpwn/openring
  25. https://drewdevault.com/2022/11/12/In-praise-of-Plan-9.html
  26. https://drewdevault.com/
  27. https://mxb.dev/blog/the-indieweb-for-everyone/
  28. https://mxb.dev/
  29. https://www.taniarascia.com/simplifying-drag-and-drop/
  30. https://www.taniarascia.com/
  31. https://thedroneely.com/posts/tailwind-css-and-beyond#isso-thread
  32. https://thedroneely.com/posts/tailwind-css-and-beyond#code-block-e98e902
  33. https://thedroneely.com/posts/automate-vultr-snapshots-using-bash/
  34. https://thedroneely.com/posts/a-few-abstracts/
  35. https://thedroneely.com/posts/writing-strategy/
  36. https://thedroneely.com/posts/my-ts100-settings-and-configuration/
  37. https://thedroneely.com/posts/writing-with-vale/
  38. https://drewdevault.com/2022/09/16/Open-source-matters.html
  39. https://mxb.dev/blog/make-free-stuff/
  40. https://thedroneely.com/sitemap.xml
  41. https://thedroneely.com/index.json
  42. https://thedroneely.com/resume/
  43. https://gitlab.com/tdro
  44. https://github.com/tdro
  45. https://codeberg.org/tdro
  46. https://thedroneely.com/analytics
  47. https://thedroneely.com/posts/tailwind-css-and-beyond#
  48. https://creativecommons.org/licenses/by-sa/2.0/
  49. https://thedroneely.com/git/thedroneely/thedroneely.com
  50. https://opensource.org/licenses/GPL-3.0
  51. https://www.thedroneely.com/
  52. https://thedroneely.com/posts/tailwind-css-and-beyond/#