When it comes to frontend development it can be very harder to stick to the game. Why? because you have to know a lot of things and be up-to-date at every point in time else you'll be left behind. We have to make sure website is responsive design, modern looking, having unique look and user attractive etc...
Most CSS frameworks do too much.
Responsive user interface have mostly been implemented with libraries like Bootstrap, Foundation, Bluma, or good old fashion media queries. but ever tired of using bootstrap or any other framework because of loading ~300kb of file when all you need is responsive grids or button or maybe responsive navigation or your all application you build looks the same when you want a little difference, you have to manually override tons of styles just so you get something different, feel tired right? trust me i know.
They come with all sorts of predesigned components like buttons, cards, and alerts that might help you move quickly at first, but cause more pain than they cure when it comes time to make your site stand out with a custom design.
What is Tailwind ?
Tailwind is a utility-first CSS framework. In contrast to other CSS frameworks like Bootstrap or Materialize CSS it doesn’t come with predefined components. Instead Tailwind CSS operates on a lower level and provides you with a set of CSS helper classes. By using this classes you can rapidly create custom design with ease. Tailwind CSS is not opinionated and let’s you create you own unique design.
Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.
The beauty about this thing called tailwind is it doesn't impose design specification or how your site should look like, you simply bring tiny components together to construct a user interface that are unique.
Getting started
Although CDN is a good way to import styling in your project, many features of Tailwind CSS are not available using the CDN builds. To take full advantage of Tailwind’s features, install Tailwind via npm.
After you've created the directory and you're in it, it's time to install.
Setting things up
then initialize project folder using command below
npm init -y
this will create package.json file and include other node modules we need. Then we can install tailwind css using npm.
Using npm
then create folder called src. inside that folder create style.css file. Inside that file you can add tailwind directives.
@tailwind base;
@tailwind components;
@tailwind utilities;
Then create another folder called dist inside that create index.html and style.css for get build output.
lets change our package.json file as below
{
"name": "tailwind",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build:css": "tailwind build src/style.css -o dist/style.css"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"tailwindcss": "^1.2.0"
}
}
to get build css classes to our style.css file run
npm build:css
Thats it now you have all tailwind CSS classes inside dist/style.css file. Time to link that file to our index.html file. go to dist foder open index.html file using your favorite editor then create link tag and add our style.css file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tailwind Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Let's See What Tailwind Got
If you follow this so far then congratulations. now let's see what we can actually build with tailwind using example. Just put below code between your <body> //here </body>.
<div class="border m-6 rounded-lg bg-white mx-auto shadow-lg max-w-xs overflow-hidden">
<img class="h-24 min-w-full block"
src="https://blogger.googleusercontent.com/img/proxy/AVvXsEgBhpiLWjYnZXL6vmgC9HODr-G3rx3_Ocu_m0MeAHU4DoAGwfkaIyEDDeZAXrpV9Lad-xjhrcALJy_A4eug56GxQIguNDHUDeC4n4MR4Y7_VYHkaWtirKLxdnJJevESBSN6lNbTQDWgvmpwZMFQqi0kB9V8SyrhKH1GHIweIHUa9czxTnVrjD62VCt2evW2cQ=" />
<div class="px-4 py-3 relative min-h-3">
<div class="sm:flex sm:items-center">
<img class="w-16 border-4 border-white border-white mr-3 rounded-full"
src="https://avatars2.githubusercontent.com/u/42809204?s=400&u=a3ef3e14e88bab76c086b6c0a165a1e767099c5a&v=4" />
<div class="w-full">
<button
class="float-right text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-blue text-blue hover:bg-blue hover:text-white">Follow</button>
</div>
</div>
<div class="mt-2 text-center sm:text-left sm:flex-grow">
<div class="mb-4">
<p class="text-xl font-bold leading-tight">Thenuka Dinu</p>
<p class="text-sm leading-tight text-grey-dark">@Thenukamaxwell</p>
</div>
<div>
<p class="leading-tight text-grey-darkest text-sm">
This is a cool profile card showcasing the awesomeness of <a class="text-blue no-underline"
href="https://tailwindcss.com">Tailwindcss</a> built by awesome people who want to make the
web a better place.
</p>
</div>
<p class="mt-6 text-xs text-grey-dark">
Followed by <a class="text-blue no-underline" href="#">Google</a> and <a
class="text-blue no-underline" href="5 others">5 others</a>
</p>
</div>
</div>
</div>
open index.html file in your browser. If it went well, you should see exactly like the image below in your browser. If you don't some thing should have missed while your doing this so do a little debugging. Make sure you have linked right css file.
What you saw above is just something simple created with Tailwind CSS. You might feel adding all those classes is not really your thing and you'll prefer to create a custom UI for that and call it a card. Doing that is very simple, I won't get into the details of that but I'll let you figure it out yourself.
Talk is cheap. Show me the code. – Linus Torvalds
Comments
Post a Comment