Stefan Bauer
Developer and Creator of PingPing.io, a simple website monitoring.
Blog Building PingPing Newsletter About
"Building PingPing" was an open-source project. There have been several reasons why I discontinued creating it in public. PingPing.io has now a commercial version. If you have any questions about PingPing, its techniques, architecture or anything else, let me know. I might do a post about it. You can find the related sources for the old posts on GitHub.

#003: We build a login using TailwindCSS

Published on January 28, 2018

In this episode, we are gonna build a login using TailwindCSS. I have already prepared the login in Sketch so that we have a good template to work from. This is what we want to build for this episode.

PingPing Login

Lets get started.

Cleaning up our packages.json

Before starting I like to clean my environment. For now, that means removing the items jQuery and bootstrap-sass from the package.json file since we won't be using them in this project.

After we have removed those packages, we can add TailwindCSS as a dependency. You can either add it directly in the package.json file and install it, or you pull it in via the command line. Either way is fine, however I suggest you at least specify a specific version of TailwindCSS. At the time of writing, the latest version is 0.4 so we'll be using that.

Our file should now look like:

Now it's time to install these packages, lets give it a shot on the command line with:

yarn install

Cool! All required packages are installed.

Time to get TailwindCSS running

TailwindCSS gets configured by a tailwind.js file. We don't yet have that file so we should generate it. Head over to the console and run:

tailwind init

Now we can see a tailwind.js file created in our application root. We are also using Laravel Mix, and therefore need to configure that properly too. Open up the webpack.mix.js file and replace its contents with the following.

What have we done there? Lets go through it really quick.

We pull in TailwindCSS and assign it to a variable called tailwindcss for use later on.

This compiles our resources/assets/js/app.js file down and saves it to the public/js directory.

Instead of using SASS, we are using LESS; that's why we have replaced the sass method with less. It's basically the same as the js-method, it grabs our app.less and compiles it down to a single app.css file and saves it to the public/css directory.

This is the interesting part. Here we have used postCSS as an option and have called tailwindcss with our tailwind.js configuration. PostCSS will walk over our css from the less compilation and compile it again, but this time through TailwindCSS.

Finally, in a production build we want Laravel Mix to add some version tags to our compiled assets for caching and performance reasons.

Now it's time to run yarn run dev.

Laravel Mix will have noticed that we are using some dependencies that we have not specified in the package.json file, and it has installed them for us. Don't believe me? Take a look at the package.json file; there will be two more packages now, less and less-loader have been added as dependencies.

Resolving the final issue

There are still some smaller issues that we have to solve.

You will have noticed that yarn run dev currently has an error. This is because it is trying to compile our app.less file, but that file doesn't exist yet.

So, create an empty app.less file in the resources/assets/less directory.

mkdir resources/assets/less
touch resources/assets/less/app.less

After that remove the sass directory and files as we won't be using sass in this project.

rm -Rf resources/assets/sass

If you try to run yarn run dev again there might be a different error.

If you didn't remove your node_modules directory and reinstall everything from scratch after we modified the package.json file, then you might have to do that now. Simply rm -rf node_modules && yarn install and you should be fine. If you didn't get an error then you can ignore this section.

In our resources/assets/js/bootstrap.js file we currently reference both jQuery and Bootstrap. Since we won't be using them, you can those that part, so that you end up with a file that looks like:

If you run yarn run dev again it should now run without any issues. If you take a look in our compiled css file public/css/app.css now you should see... nothing! Yeah! That's because our app.less is still empty.

Now we can add the tailwind configuration where all the magic happens. Go to your resources/assets/less/app.less and paste this in. By the way, you can find this basic example in the TailwindCSS Documentation.

A new yarn run dev and here we go. A brand new css file using TailwindCSS, waiting to be used.

Color configuration

PingPing Color Palettes

How I usually work is by picking a default grey color. From there, I will choose four darker greys (towards black), and four lighter greys (towards white). With that, I have a nice grey color palette which will cover 99% of the greys I need. I will then add my primary brand color, and a secondary brand color that is a darker version of the primary color. The darker color is mostly used for hover effects.

That's it. No more colors for now.

This is important: Start with one brand color, in this case our primary one. Don't add colors until you need them.

Our tailwind.js should look like this in the colors section:

The basic HTML and basic styling

Now for some HTML, clear out the default content from resources/views/welcome.blade.php, we'll be using that file for now to sketch out a first draft. Later on we'll create a dedicated file for it and clean this up. But for now it's okay.

Nothing special here. A basic HTML5 document with some minor modifications. We add the csrf-token meta-tag to help protect against CSRF (Cross-Site Request Forgery) attacks. It's not important right now to understand what that tag does, we'll cover that later. For our design we need a font called "Lato", which we get from Google Fonts. We are also including the css file that Laravel Mix has generated for us.

It is important that we cover some TailwindCSS basics.

When you add any custom CSS to your LESS file, it's important that we add it after the tailwind preflight code, but before the tailwind utilities. The tailwind utilities should always be at the bottom of the file, so that they can override any other attributes if necessary.

We have added some basic CSS here to improve font rendering and readability, and @apply-ed some tailwind css classes. This will set our default font for the website, some leading and the default text color. What we haven't defined yet though is that we would like to use "Lato" as the default sans-serif font.

To do that, add Lato to the fonts stack in the tailwind.js file. While we are editing the tailwind.js, we should also make some changes that I know we will need later on.

Add a new padding of 10 with a value of 2.5rem to the padding section. Additionally, we want to change the tracking (letter spacing) a little bit. We will change the wide tracking value to 0.03em and add two more trackings: wider and widest, which we will give values of 0.06em and 0.1em respectively.

Here is what we now have:

Creating the Login

Now we have the setup complete, we can start styling the login page.

I am not really sure how I should show you the progress, because if I show you each line we'll still not be done in the next year. Therefore, I think it is best that I show you the final file, and i'll explain the parts where I think it is necessary to. Most of what I don't explain will just be applying default tailwind classes to HTML, and I hope that you're familiar enough with HTML that it's not necessary to explain that as well.

So, here is what we have got so far.

I have left out the logo for now, because it is something that I would like to explain a little bit more.

The logo is still missing

The only thing left to do now is the logo, so let's work on that.

You might be thinking "why not just save the logo as a png or svg and reference it with an img tag" and, while we certainly could do that, I prefer to do it a different way that will give us a lot more flexibility. We will be using an svg, however we will save it as a blade template called logo.blade.php inside the resources/views directory. With the logo being a blade template we can now use the blade syntax inside of the image, and control it however we like.

Create a file called logo.blade.php in resources/views and put in the following content:

Do you already see the advantage? I really like it. We can add a class or/and a style variable in there. And what we now can do is include this file in our template and override the class or/and style attribute as we need. Awesome!

Here is, what it looks like in our welcome.blade.php.

The result

I think we're done for now. This is what we have built today, it's a little bit different from the initial sketch, but I think this is fine. I hope you like it.

PingPing Login

Feedback

This episode was really hard for me because I am not sure what you're interested in, and what you're not. I am not sure about how deep I should explain something. Are my readers beginners, intermediates, or experts?

I would like to learn more about you. So just contact me via Twitter and let me know what you think.

Only if I know what I can do better can I improve my episodes, and show you what you really like.

If you enjoy my posts or you like what I'am talking/twittering about, you should sign up. I will show you everything I know about development and UI/UX.

Imprint Cookie Policy Privacy Policy
Proudly hosted with Vultr