A quick look at functional CSS

Get a feel for working with functional CSS by using the popular library Tailwind CSS.

Functional CSS works by providing you with generic, pre-defined utility classes that you can add to your markup. This means you're able to create a styled interface just by working in HTML – no need to write any CSS!

Benefits

The main benefits are

1. Tailwind's great defaults let us get right to implementing our design without having to choose any CSS values, like colors or padding sizes
2. Because we don't need to write CSS to style our app, we don't need to come up with any class names for our markup – no opening another file, defining BEM-style classnames like .SigninForm__header, and so on.

Tradeoffs

Functional CSS does make our templates look messy. We'll discuss some ways to clean them up in later videos.

Final output

Here's the final template:

<div class="bg-grey-darkest h-screen">
  <div class="container mx-auto">
    <div class="pt-8">
      <div class="w-2/3 mx-auto shadow-lg">
        <div class="bg-white p-8">
          <h1 class='text-center text-4xl font-thin text-blue-light py-4'>
            Sign in
          </h1>

          <div class="mt-4">
            <div class='border-2 rounded py-1 px-3 mb-2 flex items-center'>
              <label for="" class='text-sm text-grey-dark font-semibold mr-4'>
                Username
              </label>
              <input class='text-grey-dark p-2 w-full' type="text" placeholder='Jonathan'>
            </div>

            <div class='border-2 rounded py-1 px-3 mb-2 flex items-center'>
              <label for="" class='text-sm text-grey-dark font-semibold mr-4'>
                Password
              </label>
              <input class='text-grey-dark p-2 w-full' type="text" placeholder='*****'>
            </div>
          </div>

          <div class="mt-6">
            <button class='bg-blue-light hover:bg-blue border-b-2 border-blue shadow-md white py-3 block w-2/5 rounded text-white mx-auto'>
              Sign in
            </button>
          </div>
        </div>
        <div class='bg-grey-darker text-center py-8'>
          <a class='text-grey-dark text-sm' href="">Forgot your password?</a>
        </div>
      </div>
    </div>
  </div>
</div>