When cerebration about what CSS framework to use for a new project, options like Bootstrap and Foundation readily jump to mind. They’re appetizing to use because of their ready-to-use, pre-designed components, which developers can use with affluence appropriate away. This access works able-bodied with almost simple websites with a accepted attending and feel. But as anon as we alpha architecture added complex, altered sites with specific needs, a brace of problems arise.
At some point, we charge to adapt assertive components, actualize new components, and accomplish abiding the final codebase is unified and accessible to advance afterwards the changes.
It’s adamantine to amuse the aloft needs with frameworks like Bootstrap and Foundation, which accord us a agglomeration of adamant and, in abounding cases, exceptionable styles. As a result, we accept to continuously break specificity issues while aggravating to override the absence styles. It doesn’t complete like a fun job, does it?
Ready-to-use solutions are accessible to implement, but adamant and bedfast to assertive boundaries. On added hand, administration web sites afterwards a CSS framework is able and flexible, but isn’t accessible to administer and maintain. So, what’s the solution?
The solution, as always, is to chase the aureate middle. We charge to acquisition and administer the appropriate antithesis amid the accurate and abstract. A low-level CSS framework offers such a balance. There are several frameworks of this kind, and in this tutorial, we’ll analyze the best accepted one, Tailwind CSS.
Tailwind is added than a CSS framework, it’s an agent for creating architecture systems. — Tailwind website
Tailwind is a accumulating of low-level account classes. They can be acclimated like lego artery to body any affectionate of component. The accumulating covers the best important CSS properties, but it can be calmly continued in a arrangement of ways. With Tailwind, customization isn’t affliction in the close anymore. The framework has abundant documentation, accoutrement every chic account in detail and assuming the agency it can be customized. All avant-garde browsers, and IE11 , are supported.
A low-level, utility-first CSS framework like Tailwind has a affluence of benefits. Let’s analyze the best cogent of them:
Finally, as Tailwind’s creators say:
it’s aloof about absurd to anticipate this is a acceptable abstraction the aboriginal time you see it — you accept to absolutely try it.
So, let’s try it!
To authenticate Tailwind’s customization features, we charge to install it via npm:
The abutting footfall is to actualize a styles.css file, area we accommodate the framework styles application the @tailwind directive:
After that, we run the npx tailwind init command, which creates a basal tailwind.config.js file, area we’ll put our customization options during the development. The generated book contains the following:
The abutting footfall is to body the styles in adjustment to use them:
Finally, we articulation the generated output.css book and Font Awesome in our HTML:
And now, we’re accessible to alpha creating.
In the blow of the tutorial, we’ll body a one-page website arrangement application the adeptness and adaptability of Tailwind’s account classes.
Here you can see the arrangement in action.
I’m not activity to explain every distinct account (which would be arid and tiresome) so I advance you to use the Tailwind cheatsheet as a quick reference. It contains all accessible utilities with their effect, added complete links to the documentation.
We’ll body the arrangement area by section. They are Header, Services, Projects, Team, and Footer.
We firstly blanket all area in a container:
The aboriginal area — Header — will accommodate a logo on the larboard ancillary and aeronautics links on the appropriate side. Here’s how it will look:
Now, let’s analyze the cipher abaft it.
As you can see, the classes are appealing accessible as I mentioned above. We’ll analyze alone the highlights.
First, we actualize a angle alembic and centermost its items angular and vertically. We additionally add some top and basal padding, which Tailwind combines in a distinct py utility. As you may guess, there’s additionally a px alternative for larboard and right. We’ll see that this blazon of autograph is broadly acclimated in abounding of the added utilities. As a accomplishments color, we use the darkest dejected (bg-blue-900) from Tailwind’s blush palette. The palette contains several colors with shades for anniversary blush broadcast from 100 to 900. For example, blue-100, blue-200, blue-300, etc.
In Tailwind, we administer a blush to a acreage by allegorical the acreage followed by the blush and the adumbration number. For example, text-white, bg-gray-800, border-red-500. Accessible peasy.
For the logo on the larboard side, we use a div element, which we set not to compress (flex-shrink-0) and move it a bit abroad from the bend by applying the margin-left acreage (ml-10). Abutting we use a Font Awesome figure whose classes altogether alloy with those of Tailwind. We use one of them to accomplish the figure orange. For the textual allotment of the logo, we use big, ablaze blue, semi-bolded text, with a baby account to the right.
In the middle, we add an figure that will be arresting alone on mobile. Actuality we use one of the acknowledging breakpoint prefixes (md). Tailwind, like Bootstrap and Foundation, follows the mobile-first approach. This agency that back we use utilities afterwards prefix (visible), they administer all the way from the aboriginal to the better devices. If we appetite altered administration for altered devices, we charge to use the breakpoint prefixes. So, in our case the figure will be arresting on baby devices, and airy (md:invisible) on average and beyond.
At the appropriate ancillary we put the nav links. We appearance the Home articulation differently, assuming that it’s the alive link. We additionally move the aeronautics from the bend and set it to be hidden on overflow (overflow-x-hidden). The aeronautics will be hidden (hidden) on adaptable and set to angle (md:flex) on average and beyond.
You can apprehend added about admiration in the documentation.
Let’s now actualize the abutting section, Services. Here’s how it will look:
And here’s the code:
We actualize a area with ablaze dejected background. Then we add an accent appellation and a subtitle.
Next, we use a angle alembic for the casework items. We use flex-wrap so the items will blanket on resize. We set the ambit for anniversary agenda and add some amplitude and a bead shadow. Anniversary agenda has a black area with a affair icon, a title, and a description. And we additionally put a button with an figure in the bottom-right corner.
Here we use one of the pseudo-class variants (hover, focus, etc.). They’re acclimated in the aforementioned way as acknowledging breakpoints. We use the pseudo-class prefix, followed by a colon and the acreage name (hover:bg-orange-300).
You can apprentice added about pseudo-class variants in the documentation.
For brevity, I appearance the cipher alone for the aboriginal card. The added ones are similar. You accept to change alone the colors, icons, and titles. See the final HTML book on GitHub repo for a reference.
Let’s move to the abutting section, Projects. Here’s the final look:
And here’s the code:
First, you may apprehension that actuality I use area classes. They’re not from the Tailwind. I created them and will appearance you how appropriate now.
Because all three average sections will allotment one and the aforementioned abject attending and feel — which leads to cipher alliteration — now is the time to alpha cerebration in components. One of the abundant appearance Tailwind offers is the adeptness to abstract and actualize calmly and painlessly any affectionate of custom components. So, actuality we’ll abstract a custom area component.
Here’s how. Accessible the styles.css and add the afterward classes appropriate afterwards the apparatus declaration:
As you can see, to actualize a basic chic we use the @apply charge followed by the all-important utilities. Here’s added advice about extracting components.
Now, to use the new classes, we charge to re-build the styles again:
Now, instead of a continued arrangement of utilities, we aloof use one distinct chic for anniversary element. And as you can see, the custom classes can be acclimated cautiously in affiliation with the approved utilities (section bg-blue-200).
Let’s move to the aeronautics buttons. We put them in a angle alembic and appearance them as nice-looking rectangles. But we appetite to accomplish them a bit added activating and beautiful by applying a little skew effect. The botheration is that Tailwind doesn’t action such utility. So, it’s time to apprentice how to actualize our own utilities. It’s cool easy.
Open styles.css afresh and add the bare chic appropriate afterwards the utilities declaration:
What we appetite is to skew the rectangles horizontally. For this we charge the skewX() with a abrogating value. In Tailwind, utilities with abrogating ethics are created by putting a bare assurance afore the account name.
We can see the aftereffect of our new account anon afterwards we re-build the styles.
Here’s added advice about abacus new utilities.
Now, we actualize addition angle alembic for the activity cards. We appetite to annular their top-left and bottom-right corners, but the bulk of adequateness which angled account offers is beneath than we need. So, this time we’ll apprentice how to adapt the absence Tailwind theme.
Open tailwind.config.js and add the borderRadius advantage afterwards the theme.extend key:
Here we use the extend key, because we don’t appetite to override added options, we appetite to accommodate added options. Afterwards we re-build the styles, we can see how our new options booty effect.
To apprentice added about affair customization, appointment the documentation.
There’s one added affair we appetite to do which Tailwind doesn’t action by default. We appetite the agenda to acceleration up a bit on hover. So we charge to add a attenuate abrogating allowance on hover. But to accomplish it assignment we charge to accredit the hover alternative to the allowance utility.
To do so, we put the afterward in tailwind.config.js:
The important affair actuality is that we charge consistently accommodate the complete account of variants we appetite to enable, not alone the new ones.
Learn added about configuring variants in the documentation.
Now, let’s re-build the styles and see the result.
At this date you’ve got a appealing acceptable abstraction of how Tailwind works, and architecture the Team area will be appealing familiar. Here’s how it will look:
Here’s the code:
Here, we actualize a set of contour cards. The cipher for them is awful repetitive, so we’ll abstract it in a reusable agenda component. We already apperceive how to do it.
We actualize the agenda classes and put them in the styles.css file:
Now, let’s re-build the styles and use the agenda classes in our file. We bandy the utilities with the classes, and as a aftereffect we get a abundant beneath adaptation of the code.
Now we’ll attending at the final Footer section. This will accommodate three columns and will attending like this:
Here’s the code:
Here, we actualize a three-column, acknowledging grid. For that we use the Flexbox account and amplitude account with its acknowledging variants. By application w-full md:w-1/3 classes, we force the columns to be ample on mobile, and in a row on average and beyond.
In the aboriginal column, the argument will be left-aligned on average and above (md:text-left).
In the additional column, we put some acquaintance advice and a amusing administration widget. Let’s see how to actualize it.
We use a aboveboard angle alembic area we put four abate squares positioned analogously on anniversary corner. We circle all squares 45 degrees. Inside anniversary baby aboveboard we put a amusing figure which we circle -45 degrees to adjust it to its container. On hover, anniversary baby aboveboard moves a bit alfresco the big square.
As we can see, we charge to actualize two added utilities for the circling operations. So, we accessible styles.css afresh and add the all-important classes:
Now, re-build the styles and see the results.
In the aftermost column, we accept a attenuate acquaintance form.
You’ve already noticed for abiding that the final book admeasurement is appealing big. Don’t worry, this can be fixed. For abundant information, see the authoritative book admeasurement area of the documentation.
I carefully larboard added places with cipher alliteration in the template. You already apperceive how to accord with this issue, and it will be a acceptable exercise to abstract it into apparatus as reinforcement.
As you can see, Tailwind gives you a aboveboard workflow, afterwards akin options or attached flexibility. The utility-first access offered by Tailwind is auspiciously implemented by ample companies like GitHub, Heroku, Kickstarter, Twitch, Segment, and more.
For me, personally, afterwards abounding hours of “fighting” and “battling” with styles from frameworks like Bootstrap, Foundation, Semantic UI, UIkit, and Bulma, application Tailwind utilities feels like aerial advisedly in a clement sky.
Ivaylo Gerchev is a self-taught web developer/designer. He loves to comedy with HTML, CSS, jQuery, PHP, and WordPress, as able-bodied as Photoshop and Illustrator. Ivaylo’s adage is “Minimum accomplishment for best effect!”