+++
date = "2019-05-11T07:10:35+00:00"
publishdate = "2023-12-29T07:08:55+00:00"
title = "Tailwind CSS and Beyond"
slug = "tailwind-css-and-beyond"
author = "Thedro"
tags = ["css","framework"]
type = "posts"
summary =  "Tailwind CSS is a tight and compact CSS framework that gives you a myriad of custom design choices."
draft =  ""
syntax =  "1"
toc =  ""
updated =  "2019-05-16"
+++

{{< image source="/images/tailwind-css-and-beyond.png" title="Tailwind CSS Design" >}}
Tailwind CSS Design {{< /image >}}

Recently, this [website](https://www.edwinmattiacci.com) of mine was redesigned.
The {{< sidenote mark="concept" set="right" >}}The inspiration comes from this
[beautiful website.](https://web.archive.org/web/20200627094231/https://faculty.com/)
{{< /sidenote >}} is a stylistic book and implemented using the
[Tailwind CSS framework.](https://tailwindcss.com/docs/what-is-tailwind)

{{< sidenote mark="Tailwind" set="right" >}}Now on version 1.0 as of May
13th, 2019.{{< /sidenote >}} 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."
{{< footer >}}[Tailwind CSS, Web Page, What is Tailwind?](https://tailwindcss.com/){{< /footer >}}

Tailwind is a utility first {{< sidenote mark="framework." set="right" >}}It is
not utility only.{{< /sidenote >}} Your `HTML` will contain many
{{< sidenote mark="composite" set="left" >}}This composite and utility-like
nature also allows for easier cache busting opportunities.{{< /sidenote>}}
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 {{< sidenote mark="little" set="right" >}}If
you are skilled at writing and managing `CSS` then Tailwind might not be that
interesting.{{< /sidenote >}} to no `CSS` at all. In repetitive situations we
can implement abstractions by
[extracting components.](https://tailwindcss.com/docs/extracting-components)