DEV Community

Dahye Ji
Dahye Ji

Posted on • Edited on

CV template made with Tailwind CSS

I've never used libraries before but learnt about Bootstrap and Tailwind CSS a little bit this time.
It actually took quite a long time for me to do this like a few hours because I wasn't familiar with the class names of Tailwind CSS. I had to search a lot on their document to find out how to do what I want. I kind of missed css and wanted to use it but I avoided using css at all today since it was to practice and to get used to Tailwind CSS.
I don't think I am going to use it a lot for my portfolio but I'm sure it's really good to use if you know their classes well enough and if you are making something small or have to build something in a very short time. Probably it's useful for creating prototype.

CV template built with Tailwind CSS

View the code
CV template

Image description

Image's from https://2020.stateofcss.com/en-US/technologies/

The satisfaction percentage of Tailwind CSS is quite high. I guess it's being used more and more these days. But it was bit uncomfortable that I couldn't give styles at once for multiple elements.
Adding base style - maybe it can help that problem a bit.
https://tailwindcss.com/docs/adding-base-styles
With Tailwind CSS, you can change tiny bits of most things compared to Bootstrap.
Bootstrap is more like a library that you can borrow small parts of modules. There are already designed buttons, forms tables, navigators, and etc.

Useful links for Bootstrap

Top comments (5)

Collapse
 
deathshadow60 profile image
deathshadow60

A poster child for everything wrong with HTML/CSS frameworks. They really are nube predator nonsense taking advantage of those who never learn enough about HTML or CSS to be coding either.

No offense, that's not on you, that's on an industry that doesn't teach HTML properly form the start, filled with scam artists and know nothings like Udemy and W3Schools.

Why do I say this?

Endless pointless presentational classes recreating everything wrong with HTML 3.2, gibberish semantics like STRONG doing numbered heading's job, attributes like TARGET that have little business on websites after 1998, static images in the markup where they can't be cached...

I don't think I'll ever understand how or why people can say that these frameworks are simpler, easier, or better for ANYTHING. It's all a bald faced lie.

As evidenced by your 21k of markup to deliver 4.34k of plaintext without a single content media element in sight, likely not even 8k of HTML's job. Just as a layout like this for a single page probably doesn't need more than 10k of vanilla CSS, leaving one wondering just what "advantages" failwind has given you.

Hell, just the fact they teach you to their bull in without media="screen" should tell you all you need to know about how unqualified Wathan and his ilk are for telling ANYONE how to make a website.

I just don't get the appeal of telling the entire reason CSS exists to sod off.

Collapse
 
daaahailey profile image
Dahye Ji

Since it was the first time that I tried Tailwind CSS, It took lots of time for me to get to know about their classes. I think I could've made it quicker if I did it just with CSS. I don’t think I am going to use it a lot because I like to have more of freedom when I’m styling things without limitation which I felt with framework(but It can be because I don’t know much about them as well) and I also personally prefer spending my time learning more about CSS than the framework.
But still I believe it can be useful if someone is making something like prototype just to see things very quickly and aware of their classes already and how it works.
However, as I already mentioned on the post if I have to build something properly and I want it to be perfect, it’s not going to be my top choice. I wrote the post because I am writing most things that I learn everyday for future reference.

Collapse
 
deathshadow60 profile image
deathshadow60 • Edited

That "limitation" you felt was likely due to your having a grasp of HTML and CSS before you used them. These frameworks are more to learn, make you write as much if not more code, make everything harder to do. The polar opposite of their marketing blurbs. It's outright delusional the praises people sing about them.

I've said it for a long time, the people who CREATED these types of "frameworks" never learned the point of HTML or embraced the separation of concerns. All they do is recreate everything that was wrong with HTML 3.2 by putting classes in the markup to say what things look like. For screen... without even saying that said style is JUST for screen by including media="screen" on their LINK

It's really one of the biggest telltales that you're learning from someone not qualified to make websites. They use style="" and STYLE all over the place, and IF they use an external stylesheet, it's just blindly LINKed in with no media targets. When you see that in all but the rarest of corner cases, you're looking at the pesky 3i of web development. Ignorance, incompetence, and ineptitude.

Only two of those are an insult. Ignorance just means you don't know any better. We can fix ignorance. We ALL start out ignorant. Most everyone remains ignorant of something. There is no shame to ignorance. It's only once you've been told and continue to do it that it becomes a problem.

Sadly -- at least in my line of work -- the latter two are becoming all too commonplace. :(

I'd say that if the framework felt limiting, then you've got a good instinct. Trust your gut on this one.

Collapse
 
mughis369 profile image
Abdul Mughees

have you deleted the code repo of this post?

Collapse
 
daaahailey profile image
Dahye Ji • Edited

Hi! I've changed that repo to private because there were things that I didn't want to display in public so, I've uploaded cv template to separate repo just now! If you'd like to check the code, have a look at this! github.com/daaahailey/cv_template/...