DEV Community: Vivian Guillen

What if Finding Quality Programming Books & Courses Was Actually Simple? Meet Codelier!

Vivian Guillen — Fri, 10 Jan 2025 02:20:05 +0000

Hey DEV Community! 👋

Have you ever set out to find a genuinely useful, advanced programming resource, only to end up knee-deep in a sea of repetitive "Learn JavaScript in 30 Days" tutorials? Same here. It’s exhausting. That’s why I decided to build something I wish existed: Codelier—a platform to help developers discover great programming content created by independent creators. Let me tell you about it.

Why I Built Codelier

As developers, we’ve all faced that endless search for good resources. You know the drill:

Maybe you’re looking for an advanced breakdown of React patterns, or perhaps you’re trying to wrap your head around system design that goes beyond the basics. Or maybe it’s a niche topic, like diving into Rust or leveling up your CSS animations. You get pumped, start your search, and… what happens? You’re bombarded with “Beginner’s Guide to X” everywhere you look. 😅

That’s not to knock beginner content, it’s hugely important, but when you’re trying to go deeper, it can feel impossible to find that needle in the haystack. The truth is, those hidden gems do exist. They’re just drowning in a sea of algorithm-driven search results and big-budget marketing campaigns.

So, I created Codelier—an easier way to cut through the noise and connect directly with quality programming education, all crafted by independent creators.

What Makes Codelier Different?

At its core, Codelier is all about simplicity. It’s just a directory of great content—a curated collection of courses, books, and other educational resources that developers have lovingly built for developers. No middlemen. No fluff. Just you, the creators, and the knowledge you’re looking for.

On Codelier, you can:

Explore topics based on what you need—whether it’s React, CSS, Python, Rust, or something else entirely
Choose the format that suits you: courses, books, whatever works
Go straight to the resource's page—no unnecessary fees or detours
Get useful descriptions that actually tell you what a resource covers

The goal isn’t to create “yet another platform.” It’s to make it easier for all of us to find focused, quality content—the kind that helps us level up.

Why Independent Creators?

I’ve always found that independent creators bring a different energy to their work. They often focus on niche, specialized topics that big platforms overlook. They’re not tied down by marketing trends or arbitrary deadlines. Instead, they pull from real-world experience and their own curiosity to produce content that’s deep, thoughtful, and practical.

Plus, they tend to update their work more often (we’ve all taken that “updated for 2020!” course in the middle of 2024, haven’t we?). It’s this combination of expertise and passion that makes their content stand out—and it’s why I wanted to shine a spotlight on them.

What’s Next?

Right now, Codelier is live and ready to help you find those hidden gems. And it’s already growing! But honestly, this is just the beginning. I want it to evolve into a resource that truly benefits the developer community—and that’s where you come in.

How can you help? Here’s what I’d love for you to do:

Check out the site: https://codelier.com. Tell me what you think.
Share any amazing resources you’ve come across—let’s keep building this library together.
Drop your feedback about what works, what doesn’t, or what you’d like to see in the future.

Looking forward to hearing your thoughts!

Tailwind Weekly #97: new icons, visual updates, and possible container queries feature 👀

Vivian Guillen — Tue, 20 Sep 2022 14:48:43 +0000

This was originally posted on Tailwind Weekly, if you want to subscribe to receive this directly into your inbox you can sign up here.

Hello folks!

This week was packed with sneak peeks of future features, new icons, and visual updates, do check out the News sections to learn more!

Now onto our usual content 😉.

🌟 News

The Tailwind Labs team sure was busy tweeting this week! In just a few days we got:

A new batch of heroicons, from Steve Schoger, love that new rocket icon!
A WIP preview of a possible container query implementation for Tailwind CSS, looks incredibly cool!
Variant "labels", never knew I so needed that until I saw it, so excited for it!
A preview for some upcoming visual updates to the earliest Tailwind UI components, also by Steve.

From the community side, we got a tweet from Sam, showing a feature I didn't even know existed! If you use the hoverOnlyWhenSupported flag on the future config property, now all your hover classes will only apply to devices that support hover, so no more weird styles on mobile when you tap elements!

🤩 Sponsors

The sponsor of this issue is Windy – the browser extension that transforms any HTML element into a Tailwind CSS component with a single click. Save hours or days when you convert your non-Tailwind sites to Tailwind or go to any website and see how you can build any element with Tailwind CSS. Get a 20% discount if you use the code TAILWIND-WEEKLY during the checkout.

Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and it's 👌. Get a 20% discount if you use the code TAILWINDWEEKLY20 during checkout.

📚 Learning

Understanding and using the new CSS style queries

You probably heard all about container queries lately, but did you know there's also a style query API that is coming soon? This article explains all about it, how to use it, and useful use cases for when it's more available. Definitely a great read to be informed of what's coming!

When Do You Use CSS Columns?

Flexbox and CSS Grid have become the default when we want to work with multi-column layouts but there's also the old fashioned columns CSS property. This CSS Tricks piece mentions a few use cases of when you would like to use columns instead of the traditional flexbox approaches.

How to use box shadows with Tailwind CSS, including custom and arbitrary values

Written by me! I had to use a one-off shadow for a client project and realized there were some quirks for doing it as an arbitrary value, so decided to write a whole post about it, I hope you find it useful!

💅 Showcase

Collect Content

Here's another SaaS landing page for you, this one is all about minimalistic layouts, hand-written-looking effects and shapes, and lots of screenshots! Also, that header font is just so 😍.

For the curious, here's Collect Content's description: ""

Stop worrying about collecting content from your clients. "Get the content you need to finish your website builds and launch on time.

🎁 Resource

Heroicons Raycast extension

If you're on Mac then you're gonna love this. Raycast is a more powerful version of Spotlight and it has a plugin system where you can add functionality to it.

This week's resource is a plugin (or extension as it's officially called) for searching and copy-pasting icons from Heroicons straight from Raycast! Pretty handy if you work with Heroicons a lot and want a more streamline way of getting them.

💼 Featured jobs

Center Pixel, Inc is hiring a full-time or contract Frontend Web Engineer
Remote / Palo Alto, CA · $140,000 - $180,000

Chicago Botanic Garden is hiring a full-time Principal Web Application Developer
Hybrid / Chicago Botanic Garden

CMS Max is hiring a full-time Lead Tailwind Developer
Remote / USA

Simple Focus is hiring a full-time Front-End Developer
Remote / USA

Infinia ML is hiring a full-time Senior Front-End Engineer
Durham, NC

⭐ Want to add your job post here? See more info.

👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Become a Pro at building components & layouts with CSS Flexbox and Grid with the Complete Guide to CSS Flex and Grid ebook by Shruti Balasa. I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book.

Manage all your projects and tasks in the most organized and efficient way possible. Use the Notion Project Management Template to stay focused and implement a robust structure for your business or personal projects.

Inspect Flow - The complete developer tool for Tailwind CSS. 50% off sale: inspectflow.io

There's a reason over 2.6 million people start their day with Morning Brew — the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.

✌️ Partners

CSS Simplified by Shruti Balasa: One simple CSS tip every Wednesday from her decade of experience right into your inbox.

TypeScript Weekly: the best TypeScript links every week, right in your inbox.

ES.next News: learn about the latest in JavaScript and cross-platform tools

Want to share something with the TailwindCSS community? You can submit a link or message me on Twitter @vivgui.

Want to support the newsletter? You can buy me a coffee with the link below 😁.

How to use box shadows with Tailwind CSS, including custom and arbitrary values

Vivian Guillen — Wed, 14 Sep 2022 20:12:44 +0000

This post was originally posted on Design2Tailwind.

Intro

Since they were introduced in 2009, shadows have been a great way to add some flair to any design. Shadows have evolved over the years and now they are incredibly flexible, even allowing for multiple shadows on a single element, similar to how the background-image property works.

Prerequisites

The only prerequisite for this article is that you need to know how box shadows work in CSS. Check out the MDN page for a refresher.

As a quick recap, you apply shadows using the box-shadow CSS property and the property allows up to 5 values per shadow: x offset, y offset, blur-radius, spread-radius, and color. If you want to add multiple shadows just separate them with a comma.

Using the default Tailwind CSS shadows

Tailwind CSS has a list of default shadows that we can use out of the box, ranging from small (sm) to really large shadows (2xl), here’s the list straight from the framework:

boxShadow: {
  sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
  DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
  md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
  lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
  xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
  '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
  inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
  none: 'none',
},

You use them using the following syntax: shadow-[value].

For example:

<div class="shadow"></div> // Default shadow, uses the "DEFAULT" value
<div class="shadow-2xl"></div> // Uses the "2xl" value

Adding your custom values

If you want to add your own shadows to Tailwind CSS just add the boxShadow object to the extend property in the Tailwind CSS config and add your values there.

For example, if we wanted to add a shadow called custom, here’s how we would do it:

// Tailwind CSS config
module.exports = {
  theme: {
    extend: {
      boxShadow: {
        "custom": '0 50px 25px -24px rgb(0 0 0 / 0.3)'
      }
    },
  },
}

Using arbitrary values in your markup

But what if you have a shadow that you only want to use in a single place in your project? That’s a good opportunity to use an arbitrary value.

Let’s say we want to use the custom shadow we create but as an arbitrary value, here’s how that would work:

<div class="shadow-[0_50px_25px_-24px_rgb(0,0,0,0.3)]"></div>

Looks different, right? Let’s break this snippet down:

Shadows need spaces between the values for them to work, but in the arbitrary value syntax, we can’t use spaces. Luckily there’s an alternative, we just need to replace the spaces with underscores (_).
Next, for the shadow color: in the original shadow, we used the modern RGB syntax, which has no commas. But that syntax doesn’t work yet on arbitrary values, we need to switch back to the old syntax that uses commas and remove any spaces between the numbers.

Using multiple shadows in arbitrary values

What if you want to use multiple shadows? Taking into account the points above, here’s how that would work:

<div class="shadow-[0_4px_6px_-1px_rgb(0,0,0,0.1),0_2px_4px_-2px_rgb(0,0,0,0.1)]"></div>

It works the same way, we just need to add a comma (,) between the shadows.

That’s it for this one! I hope you learned how to use shadows with Tailwind CSS, how to add your own shadows as custom values, and how to use shadows as arbitrary values. Until the next one!

If you liked this article you might like these too:

Tailwind Weekly #96: new template, new heroicons batch, and new update for Tailwind Play baby 😎

Vivian Guillen — Tue, 13 Sep 2022 13:32:02 +0000

This was originally posted on Tailwind Weekly, if you want to subscribe to receive this directly into your inbox you can sign up here.

Hello folks!

For my US friends, I hope you had a great long weekend!

This week we got some couple of exciting news from the Tailwind Labs team: a brand new template, new beautiful icons, and a cool update for Tailwind Play. Get more info in the news section!

Now onto our usual content 😉.

🌟 News

Ok since we missed last week we got a couple of updates for you.

The Spotlight template preview is simply lovely!

First and most important, we got a new template! Say hello to Spotlight, a personal website template with a beautiful modern design that also includes a very good-looking dark mode.

A new batch of Heroicons
Second, Steve announced a new batch of icons for Heroicons, it's just a few of them but little by little, the library is growing!

Last but not least, the Tailwind Labs team added support for the insiders builds on Tailwind Play. This means that you can test the latest unreleased features without leaving your browser!

🤩 Sponsors

📚 Learning

Everything You Need To Know About CSS Gradients

Another awesome video from Youtuber Colt Steele, the best part for me was all the examples he gave for Conic gradients and how easy they were to use. Definitely gave me a few ideas to use in the future! Overall this is a great CSS gradients intro for beginners and senior devs alike.

Do you know about overflow: clip?

This is a great article on how and why to use the overflow: clip CSS declaration. As always Kilian offers a concise explanation of the feature and shows a very cool example, he even mentions the related overflow-clip-margin property. The best thing is, that you can already use overflow: clip with Tailwind CSS by using the overflow-clipclass.

How to do gradient text with Tailwind CSS

Written by me! I wanted to do a gradient text effect on a project and realized how easy it is to do it with Tailwind CSS but I also found some gotchas, which are documented in the article. I hope you find it useful!

💅 Showcase

Leadgeek

This week we have a website with a very unique design, more grungy looking, and reminds me a lot of a comic book. I have to say I love the font choices (Inter ftw!) and the fancy background effects. Even the cookie consent popup looks cool!

For the curious, here's Leadgeek description: ""

Trusted by Amazon FBA sellers across the world, Leadgeek offers online arbitrage sourcing lists, software, and tools to put you in control of your selling.

🎁 Resource

Wind UI

Here's another component library for you. Based on Tailwind CSS of course and uses a beautiful green hue as the main color, it also looks very clean and most of the components have a lot of variations. If you like the green hue then this is a great library to jump-start your next project.

💼 Featured jobs

Crowd Favorite is hiring a full-time Senior Web Developer, Open Source
Remote / USA

Spear AI is hiring a full-time Frontend Engineer
Washington D.C. · $95,000 – $145,000 USD

CMS Max is hiring a full-time Lead Tailwind Developer
Remote / USA

Third Time Games is hiring a full-time Web Developer
Remote / Orlando, FL

⭐ Want to add your job post here? See more info.

👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Inspect Flow - The complete developer tool for Tailwind CSS. 50% off sale: inspectflow.io

✌️ Partners

CSS Simplified by Shruti Balasa: One simple CSS tip every Wednesday from her decade of experience right into your inbox.

TypeScript Weekly: the best TypeScript links every week, right in your inbox.

ES.next News: learn about the latest in JavaScript and cross-platform tools

Want to share something with the TailwindCSS community? You can submit a link or message me on Twitter @vivgui.

Want to support the newsletter? You can buy me a coffee with the link below 😁.

10 Tailwind CSS eCommerce templates, both free and paid

Vivian Guillen — Mon, 05 Sep 2022 15:01:02 +0000

This post was originally posted on Red Pixel Themes.

Free

Shuuz

Demo | Get it here

Important bits

Built with Vue3 + Vuex
Uses Strapi as a back-end
Figma design available with wireframes

Description

E-commerce website built with Vue 3 and TailwindCSS

Sanity E-Commerce Website

Demo | Get it here

Important bits

Includes 5+ pages
Has product search with size, gender, and category filtering
Uses the Shopify storefront API

Rafcart - Ecommerce Tailwind Template

Demo | Get it here

Important bits

HTML/CSS template
Includes 8 pages
Includes documentation

Paid

Sinp - Single Product Ecommerce Template

Demo | Price: $19 | Get it here

Important bits

HTML/CSS template
30+ pages and 4 different homepage designs
Includes a dynamic contact form
It’s fully responsive

Description

Sinp is a single product tailwind CSS template and comes with 30+ HTML pages along with 4 unique homepage variations all having a distinct and beautiful look. The homepage of this website has a mega menu to help users navigate around the site more conveniently. Apart from the homepage, you will find inner pages like shop page, blog page, about page, FAQ page, 404 page, contact page, etc.

Elyssi

Demo | Price: $39 | Get it here

Important bits

Made with Tailwind CSS and Alpine.js
Includes 17 Pages
It’s fully responsive

Description

Elyssi is an eCommerce HTML Template made with the latest technologies like Tailwind CSS, Alpine.JS, among others and based on a modern and creative design. It includes all the needed features to create an incredibly fast responsive business website with an amazing UI/UX experience.

ChawkBazar - React Next Lifestyle Ecommerce Template

Demo | Price: $29 | Get it here

Important bits

Built with React, NextJS, TypeScript, and Tailwind CSS.
Has an advanced product search and product quick review.
Has a mega menu
Also available in WordPress and Laravel versions

Description

ChawkBazar is a lifestyle e-commerce template based on React, Next, TypeScript & Tailwind. It has 5 home pages and many additional pages. It’s very easy to use, we have used strict typed TypeScript for reusable components.

Cartify - Laravel Ecommerce Platform with Tailwind CSS

Demo | Price: $19 | Get it here

Important bits

Uses Laravel 9, Livewire, Alpine.js, and Tailwind CSS
Supports unlimited product variants.
Pre-integrated with Stripe and PayPal.
Has a guest checkout feature

Description

Cartify is an eCommerce platform that was built on top of the Laravel framework version 9. Every single component is carefully crafted from scratch bringing ease of customization and extending.

KachaBazar - React Next eCommerce Template

Demo | Price: $24 | Get it here

Important bits

Uses Next.js, React.js, Express.js, Tailwind CSS, and MongoDB
It’s integrated with Stripe for checkout with credit card.
Has an order invoice page with an order printing option.
Has product search with price filtering, and also shows products by Category.

Description

KachaBazar is an e-commerce template built with Next.js and Tailwindcss with Rest API integration. This template backend is ready and is built with node, express, mongoose schema validation and uses MongoDB for the database.

PickBazar - React Ecommerce Template

Demo | Price: $24 | Get it here

Important bits

Built with React, NextJS, TypeScript, GraphQL, REST API, NestJS & Tailwind CSS.
Includes 7 demos and 9 dashboard templates
Includes a payment integration with Stripe

Description

*PickBazar* template was built with React, NextJS, TypeScript, GraphQL, Nest JS & Tailwind Css, our template promises to deliver an interface for your business that is quick and easy to set up!

Megabyte - Technology Store | Multipurpose eCommerce Website

Demo | Price: $35+ | Get it here

Important bits

HTML/CSS template
Includes 20+ pages
Uses Bootstrap icons, Google fonts, and Google maps

Description

Megabyte is a modern, clean, and eye-pleasing template built for online tech stores, but it can be adapted to any category, such as: a clothing and fashion store, a garden store, a food store, etc. It fits and looks elegant on any category. This is the perfect template to show your presence on the Internet and sell any type of product.

Tailwind Weekly #95: Heroicons v2.0 is here 🥳 🚀!

Vivian Guillen — Tue, 30 Aug 2022 15:52:17 +0000

This was originally posted on Tailwind Weekly, if you want to subscribe to receive this directly into your inbox you can sign up here.

Hello folks!

Heroicons v2.0 is out folks 🎉 . This launch has been long in the making and it's finally here! Check out the news section for more info.

We also decided to add a jobs section and feature job ads from the official Tailwind CSS job board, if you want to add yours then check out the section for more info.

🌟 News

Beautiful 😍

Say hello to the new Heroicons!

We got a completely new design, a new 24px solid set, and 260 icons redrawn from scratch, with the outline version using a thinner 1.5px stroke.

The icons are also available as React and Vue libraries and official Figma components so we got the whole deal 😎.

🤩 Sponsors

The sponsor of this issue is the DevTools for Tailwind CSS browser extension. The DevTools for Tailwind bring back designing and debugging in your browser. Intellisense autocompletion, full JIT engine support in minified production sites, and more. Get a 20% discount if you use the code TAILWIND-WEEKLY during the checkout.

📚 Learning

Everything Developers Must Know About Figma

This primer is not your average "here's how to use Figma" post, this is actually a great guide for its most common and advanced features and how they're useful for developers. A great read if you work translating Figma designs to code.

How to make your multilingual website suitable for RTL with only HTML and CSS

This one is short, sweet, and straight to the point. It has 3 tips for you if you're working on adding RTL support to your website. The 3rd tip "Give unicode ranges to fonts" was one I haven't heard of before and was quite interesting.

How to change the Tailwind CSS base font size

Written by me! I recently worked on a project migrating an old codebase from Bootstrap to Tailwind CSS and the original developer did the whole html { font-size: 10px; } so had to find a way around that for Tailwind and this post explains how I did it. I hope you find it useful!

💅 Showcase

Bump

Bump's design is simple and clean with beautiful blue hues, cute icons, and styled screenshots. The copy is king here and I particularly liked the testimonial section's design.

For the curious, here's Bump's description:

Create a powerful human-centered workflow for your APIs. Bump documents, diffs, and validates your API changes continuously. It lets you focus on what's important: building your product.

🎁 Resource

a17t

a17t is a Tailwind CSS plugin that provides pre-built components like field, button, and card in for your project. I would say the design is very minimalistic and I find it curious how they class prefixes like ~ and @. Overall a great resource if you like the design and you're looking to code fast with pre-built components.

💼 Featured jobs

Laravel Developer - Full-time - Remote / USA - Mindsize

Lead Tailwind Developer - Full-time - Remote / USA - CMS Max

Senior Frontend Engineer - Full-time - Remote / Everywhere - Lugg

⭐ Want to add your job post here? See more info.

👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Get smarter every day. Every day Refind picks 7 links from around the web for you, tailored to your interests. Loved by 50k+ curious minds. Subscribe for free today.

✌️ Partners

CSS Simplified by Shruti Balasa: One simple CSS tip every Wednesday from her decade of experience right into your inbox.

TypeScript Weekly: the best TypeScript links every week, right in your inbox.

ES.next News: learn about the latest in JavaScript and cross-platform tools

Want to share something with the TailwindCSS community? You can submit a link or message me on Twitter @vivgui.

Want to support the newsletter? You can buy me a coffee with the link below 😁.

How to do gradient text with Tailwind CSS

Vivian Guillen — Mon, 29 Aug 2022 18:49:00 +0000

This post was originally posted on Design2Tailwind.

In Tailwind CSS v3, gradient text has become a lot easier, here’s how to do it.

Step 1: Add your gradient styles

<h1 class="bg-gradient-to-r from-blue-600 via-green-500 to-indigo-400">
    hello world
</h1>

Here are the official docs on how to work with gradients in Tailwind but to break it down:

bg-gradient-to-r creates the gradient and makes it from left to right
from-blue-600 sets our starting color, which will go on the left
via-green-500 sets our middle color, which is optional
to-indigo-400 sets our ending color, which will go on the right and can be optional if you want the end to be transparent

You can change these values to whatever suit your use case but this is the most common structure for working with gradients in Tailwind CSS

Optional but recommended

At this point, you may have noticed an issue with your code: if your text is short enough and you resize your window to a lower width, the text will move over the gradient colors.

This will cause an issue when you have the finished gradient text code. When you resize your window, the gradient colors in your text will change.

This is because the gradient we created takes up the full width of the element instead of the width of the text.

To fix this, all we need to do is add the inline-block class to our element.

<h1 class="... inline-block">
    hello world
</h1>

Now, the gradient takes up only the width of the text, instead of the width of the parent element.

Problem solved! Now, let’s move on to the next step.

Step 2: Make your text transparent

Make your text transparent using the text-transparent class.

<h1 class="... text-transparent">
    hello world
</h1>

The text will disappear but don’t worry, we’ll fix that in the next step.

Step 3: Clip the text to the background

This is the most important thing for making gradient text, it uses the background-clip CSS property, which has multiple values and one of them is text, to use that specific property and value in Tailwind CSS we just need to add the bg-clip-text class.

<h1 class="... bg-clip-text">
    hello world
</h1>

That’s it! We now have our gradient text 🥳

Putting it all together you get this snippet:

<h1 class="bg-gradient-to-r from-blue-600 via-green-500 to-indigo-400 inline-block text-transparent bg-clip-text">hello world</h1>

Here’s the Tailwind Play link if you want to play around with it.

That’s it for this one! I hope you learned how to make gradient text with Tailwind CSS and how to take into account how the width of the text changes the gradient colors and how to fix it.

Tailwind Weekly #94: the :has() selector is almost here, use Tailwind with Remix + more!

Vivian Guillen — Tue, 23 Aug 2022 15:54:00 +0000

This was originally posted on Tailwind Weekly, if you want to subscribe to receive this directly into your inbox you can sign up here.

Hello folks!

It's been a quiet week for the Tailwind Labs team, glad they're taking it easy after such a great launch for the job board. Coming up we have the Heroicons v2 launch, a new template, and Headless UI v.17 so stay tuned!

⭐ We're adding a new section to Tailwind Weekly to feature a new developer story every week. If you want to get featured then please fill out this form.

🌟 News

No major official news folks, but on the community side, our friend Simon is teaching a Tailwind CSS workshop! Like the tweet says, you can get a pretty big discount if you sign up via the Pro Tailwind site. The first one was this last Thursday but I think there'll be more in the future.

For those of you who don't know, Simon regularly posts videos about Tailwind CSS on his youtube channel and tweets a lot about tailwind too! He's also working on an advanced Tailwind course over at Pro Tailwind and I must admit I'm eagerly waiting for it to launch 😍.

Teaching my first workshop this Thursday 🎉

There are a couple of days left to get your ticket - going through https://t.co/nVhCjkNTA2 will give you a huge discount ✨

Looking forward to this one! https://t.co/SPiY0ougBr

— Simon Vrachliotis 🇨🇭🇦🇺🏀🏄‍♂️🏂💻 (@simonswiss) August 15, 2022

🤩 Sponsors

We convert your design to Tailwind CSS. Focus on your business logic. Leave the markup code in our capable hands. Just fill out our 3-minute questionnaire and get a quote in 24 hours.

📚 Learning

:has(): the family selector

You're probably tired of how often I have mentioned the:has() selector lately but I promise this one is important. The selector will be supported on Chrome on the 105 release, which is just around the corner!

This is huge since the current release version is 104 so adoption is really picking up. We're still waiting for Firefox to implement it but that's planned. I'm so excited to play around with it when it lands!

Not All Zeros are Equal

This article was quite a ride, it's almost like a detective story! The author had an issue where their CSS was breaking on production and it turns out it was because a 0 value was breaking a particular CSS rule. The rest of the article explains why that happened and what to keep in mind when working with zeros in CSS.

How to use Tailwind CSS with Remix

Here's a detailed guide on how to set up Tailwind CSS with the popular full-stack framework Remix. Long story short, you'll need an additional npm script to set up the build step for your CSS and there are some quirks with adding it to Remix, which the article explains in detail, with examples.

💅 Showcase

Broken Rubik

That hero is so cool 😍! This week I bring you an agency website and one that really knows how to do illustrations. Theirs are so lovely! Very colorful and sharp. The rest of the website is also very nice, they have good-looking typography and a great layout plus a cool and consistent hover effect.

For the curious, here's Broken Rubik's description:

We are Broken Rubik, a team with the ability to provide personalized solutions and with high-quality standards for your ecommerce.

🎁 Resource

Meraki UI

Meraki UI is a popular components library for Tailwind CSS. They have ~108 ready-made components in 19 categories and all components include dark mode and RTL support. Overall, the component designs are simple and functional, and the code is clean.

💼 Featured jobs

Lead Frontend Dev, FT, Remote

We’re looking for an experienced frontend developer to join our small team to ensure design-focused implementation, build a solid foundation for our upcoming component system and oversee the quality of our product.
MeetingPackage

⭐ Want to add your job post here? See more info.

👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

I recently finished the "Ten++ Ways to Make Money as a Developer" ebook from Florian Pop and I really liked it. Since I'm a freelancer I already knew some of the methods he mentioned but others really blew my mind, for example, I didn't know streaming could be so profitable 🤯!

*There's a reason over 2.6 million people start their day with Morning Brew *— the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.

Get smarter every day. Every day Refind picks 7 links from around the web for you, tailored to your interests. Loved by 50k+ curious minds. Subscribe for free today.

✌️ Partners

CSS Simplified by Shruti Balasa: One simple CSS tip every Wednesday from her decade of experience right into your inbox.

TypeScript Weekly: the best TypeScript links every week, right in your inbox.

ES.next News: learn about the latest in JavaScript and cross-platform tools

Want to share something with the TailwindCSS community? You can submit a link or message me on Twitter @vivgui.

Want to support the newsletter? You can buy me a coffee with the link below 😁.

How to change Tailwind CSS base font size

Vivian Guillen — Mon, 22 Aug 2022 18:13:00 +0000

This post was originally posted on Design2Tailwind.

If you have been using Tailwind CSS for a while, you probably know that it uses a lot of best practices and recommendations for modern HTML/CSS development. Things like having great reset styles, using CSS custom properties, etc.

But there’s one particular feature, that, depending on your workflow, you may want to change, and that’s the base font size.

Tailwind CSS’ default base font size

The current Tailwind CSS base font size is 16px. Why 16px? Because this is the default font size of most popular browsers like Chrome.

Since a lot of Tailwind defaults use REM values, all these values will be multiplied by the base font size and that will get you the pixel values.

Based on this, if the text-lg class is 1.125rem, in pixels, this turns out to be 16 * 1.125 = 18px. This is exactly what you see in the class preview if you use the official VSCode extension.

Here’s how to change it

If you want to change the Tailwind default font size, you can do in 2 ways:

1. Do it with custom CSS

By adding this rule to your CSS file:



html {
  font-size: 10px; 
}

2. Do it via a plugin

By adding this to your config file:



const plugin = require('tailwindcss/plugin');

module.exports = {
  // other settings
  plugins: [
    plugin(function({ addBase }) {
     addBase({
        'html': { fontSize: "10px" },
      })
    }),
  ],
}

Now all the default REM values in Tailwind will be recalculated, using 10px as a base.

So now the text-lg class, will be 10 * 1.125 = 11.25px.

That’s pretty much it! Now all your REM values will use a base of 10.

Here’s a Tailwind Play link using the plugin approach, if you want to play around with it.

One extra step if you use the VSCode extension

If you use the official extension for VSCode you may notice that the class preview shows the pixel values still using 16px as a base. To change this you need to add this to your VSCode config:



// other vscode settings
"tailwindCSS.rootFontSize": 10 // <- your root font size here

Now the class preview will have the correct values:

That’s it for this one! I hope you learned how to change the Tailwind CSS default base font size and how to make the VSCode extension reflect that change in its class preview.

Tailwind Weekly #93: the job board is live folks 🚀!

Vivian Guillen — Tue, 16 Aug 2022 16:07:00 +0000

This was originally posted on Tailwind Weekly, if you want to subscribe to receive this directly into your inbox you can sign up here.

Hello folks!

It's official folks, the Tailwind CSS job board is live 🤩!

I think this will be a great addition to the ecosystem, now people who love Tailwind CSS can find jobs at companies that love it too, that's a big win in my book!

🌟 News

We just launched the official Tailwind CSS job board! 🥳

Find a job working at an awesome company using tools you love like Tailwind CSS. https://t.co/v6unrKYAlV

— Adam Wathan (@adamwathan) August 9, 2022

That's the official announcement tweet from Adam, so exciting!

For the curious, here are some interesting facts about the job board:

Each job post costs $499 but there are some additional perks you can buy like boosting the listing every day or every week.
There's a newsletter that sends you the latest job posts every week.
All job posts are also shared on the official discord chat in a special channel so it doesn't get lost in the busy community hiring channel.

On the Tailwind UI front, we got a new template! Say hello to Pocket, a marketing landing page for mobile apps. See the demo
here, it's gorgeous!

🤩 Sponsors

We convert your design to Tailwind CSS. Focus on your business logic. Leave the markup code in our capable hands. Just fill out our 3-minute questionnaire and get a quote in 24 hours.

📚 Learning

3 useful CSS hacks

Another great video from Kevin Powell, I really liked the first hack (using border-radius: 100vmax), I have never seen it before and it's very clever! The other tips are just as good, definitely a great watch!

Grid for layout, Flexbox for components

This one is an old one from Shadeed but it's still very relevant. The article details a very good mental framework on when and how to use CSS Grid and Flexbox for coding layouts.

How to hide the scrollbar with Tailwind CSS

Written by me! I had this issue recently with a client project and realized the solution had a few quirks you need to keep in mind, so I decided to document it in this blog post. I hope you find it useful!

💅 Showcase

Lee Robinson – Developer, writer, creator.

Another personal site! This one is from Lee Robinson, a talented developer with a very good eye for design and it shows all over his portfolio! From the micro-interactions animations to the minimal but beautiful layout, the whole site is just nice to look at. I also particularly loved his Dashboard page, very clever!

🎁 Resource

Dynamowaves - SVG wave templates

CSS Weekly recently did a video about this one and I just had to share it! The package helps you create fancy SVG wave shapes, which can make your design really unique. The best part is that, depending on how you configure it, the shapes can change on every page load, very unique!

👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

PixelSnap 2 is the fastest tool for measuring anything on your screen. I use it as part of my front-end development workflow to make sure I'm translating screens as close as possible to the design.

✌️ Partners

CSS Simplified by Shruti Balasa: One simple CSS tip every Wednesday from her decade of experience right into your inbox.

TypeScript Weekly: the best TypeScript links every week, right in your inbox.

ES.next News: learn about the latest in JavaScript and cross-platform tools

Want to share something with the TailwindCSS community? You can submit a link or message me on Twitter @vivgui.

Want to support the newsletter? You can buy me a coffee with the link below 😁.

11 FIGMA Dashboard templates, both free and paid

Vivian Guillen — Mon, 15 Aug 2022 21:34:00 +0000

This post was originally posted on Red Pixel Themes.

Free

Purity UI Dashboard - Chakra UI Dashboard

Demo | Get it here

Important bits

100+ Elements
Light + Dark Mode
4 pages

Description

Designed for those who like modern UI elements and beautiful websites, it’s made of hundreds of elements, designed blocks, and fully coded pages.

Ariol Dashboard Template Design

Demo | Get it here

Important bits

80+ pages
Includes pages for creating clients, orders, contracts, handling communication, and managing finances.
Also available in Adobe Photoshop format

Description

Ariol is a beautiful and unique dashboard with more than 80 pages in different directions that will make your life easier when creating any system management site.

Hope UI Admin

Demo | Get it here

Important bits

Includes Light & Dark Mode
Includes error and maintenance page designs
Also has code available

Description

Hope UI is a gorgeously built pre-designed admin dashboard template. Has 5 admin template is fully responsive and user-friendly

Paid

HRAD | HR management dashboard

Price: $25 | Get it here

Important bits

Includes 66+ pages
Includes Light & Dark Mode
Uses components and it's well organized

Description

HRAD is a great HR management dashboard that has a modern, clean, creative & unique design based on the latest technology. This web app template consists of 66 attractive pages in both light & dark variants and all symbols and objects are vector-based and easily editable. Suitable for anyone who is looking for an HR & admin process solution for their company.

Figma Admin Dashboard Pro Template

Demo | Price: $79 | Get it here

Important bits

Includes 27 pages
Optimized for Tailwind CSS
Style guide and auto-layout included
Screens available for mobile and tablet devices

Description

Figma Dashboard Pro is a premium set of UI components and pages built in Figma optimized to be used with the Tailwind CSS utility classes. It includes features such as variants, auto-layouting, style guidelines, and also optimized screen examples for mobile and tablet devices.

Tagih - Simple Neat Banking Admin Dashboard Figma

Price: $18+ | Get it here

Important bits

Includes 16 screens
Only has light mode
Style guide included

Description

Tagih, a simple neat banking admin dashboard, consists of 16 pages that are needed in organizing and managing your finance that is available only in light mode in Figma format files. You can edit or customize the text, images, and colors on the template by using Figma to fit your financial recording needs.

Relik - Admin Dashboard Figma Template

Price: $22+ | Get it here

Important bits

Includes 35 screens
Includes 150+ Widgets & Components
Has Light & Dark Mode

Description

Relik is a beautiful, simple, developer-friendly, highly customizable admin dashboard template with a high-quality UI & well-organized Figma file. This Admin Dashboard helps the users to build their dashboard design with the format you like by components on Figma that are fully customizable and dragging & dropping widgets and components.

Hospital Admin Dashboard UI Figma

Price: $12+ | Get it here

Important bits

Includes 6 pages: Dashboard, Patient List, Patient Details, Doctor List, Doctor Details, Review page
Documentation included
Available in PSD format

Description

Modern dashboard User Interface design template for a Hospital Administration. This template is ideal for hospitals, clinics, administration, doctors admin, and any admin dashboard website. Make your admin dashboard design looks stunning and eye-catching using this template. This template includes 6 unique and modern User Interface screens in PSD and Figma format. You can easily edit and customize using Adobe Photoshop and Figma.

Mirion - Simple Professional Admin Dashboard Figma Template

Price: $12+ | Get it here

Important bits

Includes 14 screens
Style guide included
Uses Google fonts

Description

Mirion has everything you need to make your admin dashboard more well-organized and neat. This dashboard template consists of 14 useful and well-designed pages using dim color and a friendly user interface so it will be comfy for any user. This template is available in Figma format file so you can customize the text, image, and color on the template by using Figma.

Glazey - Modern Admin Dashboard

Price: $16.5/month | Get it here

Important bits

Includes 14 screens
Documentation included
Also available for Sketch and Adobe XD

Description

An admin organizes many things in a company, from sorting emails and invoices, and monitoring statistical fluctuation, to maintaining various transactions and projects. This admin dashboard template contains 14 pages in three different format files you can choose which adapted to the application you usually use; XD, Sketch and Figma format files that are available in light mode only.

Davur - Restaurant Admin Dashboard Figma

Price: $12+ | Get it here

Important bits

Includes 6 pages: Dashboard, Order Page List, Order Detail, Customers page, Analytics page, Review page
Documentation included
Also available for Adobe Photoshop

Description

Modern dashboard User Interface design template for a Restaurant food ordering. This template is ideal for restaurants, food orders, food delivery, restaurant booking, and any admin dashboard website. This template includes 6 unique and modern User Interface screens in PSD and Figma format. You can easily edit and customize using Adobe Photoshop and Figma.

14 Figma UI Kit Templates, both free and paid

Vivian Guillen — Thu, 11 Aug 2022 16:23:00 +0000

This post was originally posted on Red Pixel Themes.

Free

Rhombus Multi Purpose Dashboard UI Kit

Get it here

Important bits

90+ screens for desktop and mobile
Global Styleguide
Also available for Sketch

Description

Rhombus is a modern, minimalist, and easy to use dashboard UI Kit for multi-projects. It contains 90+ pre-made dashboard designs in 9 categories.

Materio Admin Dashboard UI Kit Template

Preview | Get it here

Important bits

100+ pages
Light + Dark Mode
Has 3 dashboard options: CRM, Analitycs, and E-commerce
Has style guide and components

Description

Materio offers 5 carefully crafted apps, 3 real-life dashboards, dark & light layouts, 100+ pages, and many more features. You can now kick start your next Figma project by using Just drag and drop pre-made components from the Assets panel. Also, you can configure them in the right sidebar.

Dashboard Constructor UI kit

Preview | Get it here

Important bits

300+ Templates, 1000+ UI Cards and 589 Blocks
Global Styleguide
100% responsive
Also available for Sketch and Adobe XD

Description

Huge kit of Blocks, UI Cards and Templates in various categories will help you create your project as quickly as possible.

Paid

Clever – Figma Dashboard UI Kit

Price: $39+ | Get it here

Important bits

Includes 25+ pages
Has 300+ components and 1000+ vector icons
Style guide available

Description

Clever is the first theme built on top of our recently released Purpose Design System, which was built to enable designers to create modern user interfaces faster and better. It contains everything a designer needs: theme setup, style guide management, pixel-perfect components, variants, and designer-made templates, all in one single file.

Panda – UI Design Dashboard

Demo | $40+ | Get it here

Important bits

Includes 90+ pages and 4000+ components and options
Has 200+ Global Styles and 1000+ Resources
Light and Dark Mode
Styleguide included

Description

Panda UI is Figma’s strongest UI kit and design system. It was created to help you speed up your workflow and greatly improve your design quality. Every element and component has been carefully crafted with Autolayout, and we've expanded it all with options that add accessibility to your design.

Unity Dashboard Kit

Price: $68 | Get it here

Important bits

45+ screen
Optimized for mobile and tablet
Light + Dark Mode
Code version available

Description

Unity is a clean and minimal production-ready dashboard UI Kit targeting a wide variety of use cases for desktop and mobile applications in light or dark mode. This dashboard template helps designers ideate dashboard projects faster and easier with 10 premade templates, including over 90 component cards linked to symbols, and a global style guide. All elements are fully editable via overrides or you easily deconstruct them if you want to build your own.

Substance Dashboard UI Kit

Price: $64 | Get it here

Important bits

300+ screens and 230+ components
Global style guide included
Responsive design

Description

Substance is a clean and minimal dashboard UI Kit targeting a wide variety of use cases for desktop and mobile applications. This dashboard template helps designers ideate dashboard projects faster and easier with 300+ premade templates, including over 230 component cards linked to symbols, and a global style guide.

Material Design for desktop - Dashboard UI kit

Preview | Price: $138+ | Get it here

Important bits

48 templates and 500+ components
60 dashboard templates
Light + Dark Mode

Description

Figma library with dashboard templates based on reusable desktop app patterns carefully handpicked from the most popular products. Contains 550+ components and 48 desktop templates (light and dark) in 1440px width each. You can remix and transform layouts according to your design mission.

Vuexy – Figma Admin Dashboard UI Kit Template

Price: $24+ | Get it here

Important bits

100+ screens
500+ Components
Light + Dark Mode

Description

Enjoy a carefully crafted and extremely useful clean & modern Dashboard UI kit based on Atomic design system. Thanks to pre-prepared guides and symbol structure, it helps you to create projects as quickly as possible.

Administrator Dashboard UI KIT

Price: $48 | Get it here

Important bits

50 dashboard templates and 200 components
Light + Dark Mode
Available for Sketch

Description

Administrator is a complete design system. You get a fully customizable and ready-to-use collection of UI components, closely related to each other and combined on different levels, regarding systematic design principles.

CaDas Dashboard UI Kit

Price: $58 | Get it here

Important bits

128 screens
Light + Dark Mode
Available for Sketch

Description

CaDash is a stylish interface designed specifically for Dashboard. It includes 128 carefully crafted screens for 2 light and dark versions that you can use for your next Dashboard project to be brighter and more engaging to potential users. This set of user interfaces is available for Sketch and Figma. Created with a unique style using modern rounded corner shapes and color schemes.

Free Sneat Admin Dashboard UI Kit Template

Preview | Price: $59+ | Get it here

Important bits

3 dashboard templates, 30+ pages and 6 layouts
160+ components
Light + Dark Mode
Style guide available

Description

Most Powerful & Comprehensive Bootstrap 5 HTML Admin Dashboard Template built for developers!

Multipurpose Dashboard UI Kit

Price: $16.50/month | Get it here

Important bits

25+ templates
380 UI components
Light + Dark Mode
Style guide included

Description

This product is a clean and modern dashboard UI Kit targeting a wide variety of use cases for web and mobile applications in light and dark mode. With 50+ different premade screens/templates, including 100+ components, symbols, and elements you are able to create your own unique design for your next project. It´s made by designers for designers and freelancers. All elements are fully editable with Adobe Photoshop, Adobe XD, Sketch and Figma

The Ultimate UI Creator

Price: $39+ | Get it here

Important bits

15 dashboard templates
500+ components
Style guide included
Compatible with Sketch, Adobe XD and Adobe Photoshop

Description

The Ultimate UI Creator is a modern, clean and very detailed UI kit including style guides and pre-made template to boost your design projects. The UI kit is compatible with all modern design tools such as Adobe Photoshop, Adobe XD, Sketch and Figma. Includes a style guide and design system with more than 500+ different UI components, elements and widgets, you are able to create unlimited possibilities.