#003: We build a login using TailwindCSS
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.
Lets get started.
Cleaning up our packages.json
Before starting I like to clean my environment. For now, that means removing the items
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:
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:
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
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
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-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
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.
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.
yarn run dev and here we go. A brand new css file using TailwindCSS, waiting to be used.
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.
tailwind.js should look like this in the
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:
widest, which we will give values of
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
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
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
style attribute as we need. Awesome!
Here is, what it looks like in our
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.
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.