3 ms·

Can someone comment on Blunt vs. Tailwind?

lemonberry 6y ago
With a quick glance it looks like Blunt has fewer classes. It seems to be more of a utility + whatever-css-method you choose, e.g.BEM. Blunt has utilities for margin, padding, height, width, font size, line height, grid and classes for row, column and some text alignment utilities. Tailwind includes border, font color, transitions, background color, etc. I'm using Tailwind on a project right now. My first one. I like it. But the big appeal to me is using the same classes on all of my projects. It's less cognitive overhead than coming up with names, dealing with scope creep on classes, etc. That said, a buddy of mine that is a much better web developer than I uses Sass to make base utility classes and a BEM like approach for the rest.
Brajeshwar 6y ago
Blunt looks like a simpler defined framework for styles. Tailwind is a utility framework for your styles. With Tailwind, I can do pretty much everything withotu having to write the "default" styles which I already know but don't want to. Depending on my needs, team-size and flexibility, I can set Tailwind to be used without ever writing a single line of CSS or use it to define my custom classes. E.g. of a recent project https://github.com/sagri/sagri.co https://github.com/sagri/sagri.co
dgut 6y ago
Tailwind has a class for almost everything, which makes it quite heavy: 1600kb minified. In my experience you end up with ≤ 15kb of minified CSS after running PurgeCSS anyway, so this is not an issue. Personally I prefer Tailwind because you practically don't have to write any CSS. With something like Blunt expect finding many edge cases where you will have to write custom CSS. I do write custom classes that wrap Tailwind classes using the @apply method.. e.g .card and .btn are typical examples (see https://tailwindcss.com/course/composing-utilities-with-apply https://tailwindcss.com/course/composing-utilities-with-appl...).
- leviathan 6y ago
  > ... Tailwind because you practically don't have to write any CSS. Only until you want to apply a hover style change on a child element (ie: make that svg icon change color when you hover on the a tag that wraps it) and you discover that you need to write that css yourself.
  - simplify 6y ago
    group-hover was made specifically for this use case: https://tailwindcss.com/docs/pseudo-class-variants/#group-hover https://tailwindcss.com/docs/pseudo-class-variants/#group-ho...
- welly 6y ago
  Going slightly off topic but I wonder if anyone can point me to a tailwind "starter kit" - ie. a project with everything in place to get going with tailwind, postcss etc. Thanks!
  - type0 6y ago
    https://www.tailwindtoolbox.com/ https://www.tailwindtoolbox.com/ https://github.com/creativetimofficial/tailwind-starter-kit https://github.com/creativetimofficial/tailwind-starter-kit
    - welly 6y ago
      And thank you too!
  - hit8run 6y ago
    That's the official starter kit: https://github.com/tailwindcss/playground https://github.com/tailwindcss/playground
    - welly 6y ago
      Thank you!

With a quick glance it looks like Blunt has fewer classes. It seems to be more of a utility + whatever-css-method you choose, e.g.BEM. Blunt has utilities for margin, padding, height, width, font size, line height, grid and classes for row, column and some text alignment utilities. Tailwind includes border, font color, transitions, background color, etc. I'm using Tailwind on a project right now. My first one. I like it. But the big appeal to me is using the same classes on all of my projects. It's less cognitive overhead than coming up with names, dealing with scope creep on classes, etc. That said, a buddy of mine that is a much better web developer than I uses Sass to make base utility classes and a BEM like approach for the rest.

Brajeshwar 6y ago

Blunt looks like a simpler defined framework for styles. Tailwind is a utility framework for your styles. With Tailwind, I can do pretty much everything withotu having to write the "default" styles which I already know but don't want to. Depending on my needs, team-size and flexibility, I can set Tailwind to be used without ever writing a single line of CSS or use it to define my custom classes. E.g. of a recent project https://github.com/sagri/sagri.co https://github.com/sagri/sagri.co

dgut 6y ago

Tailwind has a class for almost everything, which makes it quite heavy: 1600kb minified. In my experience you end up with ≤ 15kb of minified CSS after running PurgeCSS anyway, so this is not an issue. Personally I prefer Tailwind because you practically don't have to write any CSS. With something like Blunt expect finding many edge cases where you will have to write custom CSS. I do write custom classes that wrap Tailwind classes using the @apply method.. e.g .card and .btn are typical examples (see https://tailwindcss.com/course/composing-utilities-with-apply https://tailwindcss.com/course/composing-utilities-with-appl...).

leviathan 6y ago
> ... Tailwind because you practically don't have to write any CSS. Only until you want to apply a hover style change on a child element (ie: make that svg icon change color when you hover on the a tag that wraps it) and you discover that you need to write that css yourself.
- simplify 6y ago
  group-hover was made specifically for this use case: https://tailwindcss.com/docs/pseudo-class-variants/#group-hover https://tailwindcss.com/docs/pseudo-class-variants/#group-ho...
welly 6y ago
Going slightly off topic but I wonder if anyone can point me to a tailwind "starter kit" - ie. a project with everything in place to get going with tailwind, postcss etc. Thanks!
- type0 6y ago
  https://www.tailwindtoolbox.com/ https://www.tailwindtoolbox.com/ https://github.com/creativetimofficial/tailwind-starter-kit https://github.com/creativetimofficial/tailwind-starter-kit
  - welly 6y ago
    And thank you too!
- hit8run 6y ago
  That's the official starter kit: https://github.com/tailwindcss/playground https://github.com/tailwindcss/playground
  - welly 6y ago
    Thank you!