possible. We will not cover things like using Tailwind with Webpack, Laravel Mix or others, instead we will only concentrate on Tailwind itself.
I am not a frontend pro, but I think that as a developer, a utility-first CSS framework like Tailwind can help me design custom and at the same time beautiful user interfaces. According to many, Tailwind will be a big deal in near future.
Below is our completed designed page, which we will build with Tailwind in this post.
What is Tailwind CSS?
Tailwind is a utility-first CSS framework, think of it as a bunch of pre-written small and tiny CSS utilities/classes for your use.
Unlike frameworks such as Bootstrap, Foundation and Bulma, there are no out of the box UI components. Instead, you can use Tailwind’s utilities to build your own custom UI components, which offers a great deal of flexibility in your designing process. You won’t be bound and dependent to your framework’s design choices.
All of the above can be achieved even without writing a single line of CSS. To understand more on what Tailwind is and what it isn’t, please refer to the official docs: What is Tailwind?.
Getting Started
Installation
We will start with an empty directory and we will use npm to install Tailwind.
Create an empty directory named tailwind-learning and inside it run npm init to initialize the project. After that run the following command to fetch and install Tailwind from NPM repository.
$ npm install tailwindcss --save-dev
Basic Configuration
Tailwind needs at least two files to work with, a configuration file and a CSS file where you import Tailwind’s base utilities.
Configuration file is the main place where all Tailwind related configs like options for colors, font sizes, borders and others exist. To create it, run the command:
$ ./node_modules/.bin/tailwind init tailwind.js
Next, create a CSS file (style.css) where we will inject Tailwind’s preflight and utilitiesstyles using @tailwind directive. You can use this file to inject your own custom utilities and components, but to keep things simple, we will skip that for now.
https://m.dotdev.co/media/d4c7a1a755b53cf191b17a5d6494031b?postId=f9c04bc14ff9
Final step would be to compile style.css with Tailwind’s build engine. This will generate a dist.css that we can include in our HTML page.
$ ./node_modules/.bin/tailwind build style.css -o dist.css
Writing the Login Page Markup
Above is all what we needed to get started with Tailwind. For bigger projects, we may need to use Webpack or other tools with Tailwind, which I aim to cover in upcoming posts.
Before we get into using Tailwind specific utilities, we will create our page’s HTML structure. Below is a pure HTML structure of the page we want to build.
If you notice in the above code, we don’t have a single class attribute defined in any of HTML tags. We will go tag by tag and style them using our Tailwind CSS utilities. Below image is how our current HTML page will look.
Basic Page Styling
Before we start anything, we have to setup our basic stuff like, background color, maximum page height and others. We can directly apply these classes to body element as below.
In above example, we have used three classes from Tailwind utilities. Each one is described in below.
- Background color: We used
bg-grey-lighterto give light grey color to the background. The syntax for this isbg-{color}. Where color can be anything from values mentioned in background docsand color docs. - Screen Height: Class
h-screenwill make the element height same as screen height, it’s 100vh in CSS. You can use theh-{size}syntax to use other values as well. - Font Family: This class sets our body font family to sans family of fonts.
Keep in mind that in some cases you can refer to your Tailwind config file which in this case is
tailwind.jsand use it as a documentation. Comments are really well written and descriptive.
You can easily configure Tailwind for your custom use, by going to Tailwind’s config file
tailwind.jsand adding or changing values for different options the way you like. Please remember that you need to re-build yourdist.cssto have the changes affected after you make any change totailwind.js.
Centering (Positioning) Elements
Tailwind provides utilities to use Flexbox easily. As per our final design, we have to vertically and horizontally center all of our page’s elements. Let’s see how we can do it using Flexbox and some other Tailwind utilities.
- Container: This utility (
container) works same as Bootstrap’s container, setting up max-width of the page. The only difference is that Tailwind doesn’t add margin’s automatically to left and right of the element to center it on the page. Therefore, we need to addmx-autoto center the element. - Height 100%: We use
h-fullto stretch the height of an element same as that of its parent height, it is equivalent toheight: 100%. Refer to official docs of height and width for more details. - Flexbox: I must admit that Tailwind makes it enjoyable to use Flexbox. In our case, we have used
flexto specify that we will be using CSS flex display and we have addedjustify-centeranditems-centerto horizontally and vertically center the child elements inside our div. - Elements Widths: We can use
w-{size}syntax to specify the width of our elements. In this case we are usingw-1/3to set the width of our element to one third of its parent element. It’s equivalent to set an element class tocol-md-4 col-md-offset-4in Bootstrap. - Text Styling and Positioning: There are several ways to style text in Tailwind. In above,
font-hairlinesets the CSSfont-weightproperty to100andtext-centeris equivalent to CSS’stext-align: center. - Margins and Paddings: This is one of my favorite parts. You no longer need to shift between your HTML and CSS files to set different margin and padding sizes for your elements. In Tailwind, you can easily use
p{side?}-{size}andm{side?}-{size}to add margins and paddings. We have usedmb-6which sets the bottom margin of our header to 1.5rem. Below is a list of possible values we can replace with size placeholder in above example.
Please note that as mentioned before, you can change or add values to all options which exist in tailwind.js file.
Following is the screenshot of how our page looks like with all the code we have written so far.
Positioning looks good, now we need to concentrate on our labels, form fields and buttons styling.
Form Elements Styling and CSS Pseudo-classes
In this section, we will not be covering each and every field and part of the form, but we will only cover new utilities. For the remaining elements, you have to figure it out on your own using the existing knowledge you have gained through this post.
- Login Box: We have given our login box a white background (
bg-white) along with shadows (shadow-lg) so it can stand out on our grey colored background page. We have also added a 1.5rem bottom margin and a padding of 2rem to all four sides. - Borders and Radius: You can use
border{-side?}{-width?}andborder-{color}for specifying a border’s width, color and side.rounded{-radius?}is used to set our border’s radius. - Labels: We put a small margin to the bottom of label using
mb-2and also we have usedfont-boldto set our font’s weight to bold. Both label and input useblockutility which is same asdisplay: blockin CSS. - Appearance None: If you want to remove and reset all browser default styling on an element, use
appearance-noneutility. This way you can fully customize the design of the elements you work with. - Hover: If you want to add a specific style to an element on states like hover or focus, you can use
hover:{whatever-style-class}syntax. In the above example, we change the text box border to darker grey when you hover on it (hover:border-grey).
Note: We don’t have a border width with value 12px in Tailwind’s config file by default. We have used this to give our login div’s top border a size of 12px (border-t-12). Please add it manually as shown below and then run the build command again to generate a new dist.css.
Final Thoughts
I know that there are some confusions moving around your head right now, like Tailwind seems to be messing up my HTML code and there are lots of duplicate code written. Well, as I said in the beginning, this is a post that I tried to only cover the basics of Tailwind. You can easily abstract utilities by creating components and utilities in Tailwind. Please refer to extracting components and adding new utilitiesfor more info.
I will cover Tailwind’s advance-ish topics in upcoming posts.
Below is the full version of our code login.html. I have tried my best to cover the general parts of Tailwind in an easy way, please let me know through comments if I haven’t done it in a good way.
https://m.dotdev.co/media/4ede65d4ff3c57459297870a8ff789d2?postId=f9c04bc14ff9
Below is how our final result will look like.
That’s it for now. I will cover more and more about Tailwind in my upcoming posts. Let me know of your suggestions through comments.https://m.dotdev.co/tailwind-css-building-a-login-page-f9c04bc14ff9
Arena Geeta Bhawan, Indore 