Hacker News·4yTailwind CSS v3.0 – Tailwind CSS
Tailwind CSS v3.0 is here, bringing incredible performance gains, huge workflow improvements, and a seriously ridiculous number of new features. Every color out of the box, including all of the extended palette colors like cyan, rose, fuchsia, and lime, and fifty shades of grey gray. Colored box shadows for fun glow and reflection effects, and more natural shadows on colored backgrounds.
Hashnode·4yMy honest opinion on Tailwind CSS
Tailwind is a utility framework that can be used to optimize and speed up your development. Tailwind should not be used if you don't have medium experience with CSS in general. Even though Tailwind has uniform classes, every website built with it is so different.
Hashnode·5yTools for Web Developers To Work Smarter and not Harder
The Web Developer is a browser extension that comes bundled with various web developer tools. Quokka makes prototyping,learning and testing JavaScript and Typescript code blazingly fast. Google Lighthouse is an open-source, automated development tool for testing/improving the quality of your web pages.
daily.dev·5yWhy I moved from styled-components to Tailwind CSS and what's the future of CSS-in-JS?
Styled-components is an open-source JS library that uses the power of JavaScript to create styled React components easily. Tailwind CSS follows the Atomic CSS methodology, where every class sets only one styling rule. The only difference is that you write your CSS in your JS files or even JSX.
freeCodeCamp·5yHow to Build a Portfolio Site with Next.js and TailwindCSS
Manu Arora: How to Build a Portfolio Site with Next.js and Tailwind CSS. How to build a site with next.js, TailwindCSS and other tools to help you grow your business. Manu: The best way to grow a business is to have a portfolio of sites.
DevDojo·5yTailwindCSS Hidden Gems 💎
Using the space utility classes, you can easily add equal spacing between your elements instead of using margin. You can also use the divider classes to add dividers between your Elements. Instead of using custom box-shadow values to create rings around elements, can utilize these classes to display the same output.
DEV·5yHow to Create Modern Cards using React and Tailwind
In today's example we will make a simple card, but in my opinion it has a very different design when compared to many libraries and frameworks. The framework we are going to use today is Tailwind CSS and along with this framework we will use other tools such as classnames and react-icons.
Product Hunt·5yTailwind Mobile - Mobile UI components built with Tailwind CSS
Tailwind Mobile - is a free and open source mobile UI components library built with Tailwind CSS. With components for React, Svelte & Vue.js. Embed on your blog or social media accounts to show your support for Tailwind Mobile. Back to the page you came from.
daily.dev·5yTailwind CSS from Zero to Hero - Dark Mode, JIT & More!
Using with Preprocessors: Adding a dark mode and directives.Configuring styles based on a design system: New JIT mode. Extending default breakpoints: Adding accessibility support. Using Less: Using the core Stylus features won’t work. Using PostCSS: If you are interested in using PostCSS, then check out the previous articles.
Product Hunt·5yDaisyUI — Free UI components plugin for Tailwind CSS
DaisyUI is a plugin for Tailwind CSS - Beautiful CSS component - Clean HTML with component classes. Customizable and themeable - Only 2KB. No JS, No dependencies - Free! Embed it in your site and use it to share your content with the world.
Product Hunt·5yFlowrift - Beautifully designed Tailwind CSS UI blocks
Flowrift is a library made of beautifully designed Tailwind CSS UI blocks. Go big or go small: Stack blocks on top of each other to build full-page layouts, or selectively copy small code snippets. All blocks work with Tailwind's default configuration. Embed Collect
DevDojo·4yFlowbite - Tailwind CSS components
Flowbite is an open source component library built with Tailwind CSS. It features commonly used elements such as buttons, modals, dropdowns, and even plugins, such as datepickers. It is supposed to help you build websites faster by having a set of web components to work with.
DevDojo·5yTailwind CSS — all you need to know to get started
Tailwind encourages and facilitates a utility-first approach where you write as few custom styles as possible. For this reason, Tailwind CSS isn't really a CSS framework such as Bootstrap or Bulma. The most important part of learning how to use Tailwind is actually using its classes.
DevDojo·5y5 reasons to start using TailwindCSS
Tailwind has a large set of utility classes that add padding, margin, width, height, and other CSS properties to an HTML element. Tailwind also has a beautiful color palette, incluing 8 basic colors with 10 different shades. You can customize colors, spacing, and everything else inside of Tailwind.
DevDojo·4yNextJS+Typescript and Tailwind: A match made in heaven
Next.js is a React framework with features like hybrid static and server rendering, TypeScript support, smart bundling, route pre-fetching, and more. Tailwind CSS is a utility-first CSS framework that is being used to create markup-based designs. In this tutorial, we'll learn how to build up Next.js with TypeScript and TailwindCSS.
Hashnode·5yHow I built Rozbnb 🛌 with Next.js , Tailwind CSS, Styled Components , Stripe💰 and Auth0 🔒
A few weeks ago a great youtuber called Sonny Sangha hosted a 5day challenge of cloning Airbnb. After strategizing I planned to make that clone into a better website with authentication , animation , better UI and so on. The Motivation: I was exploring Auth0 for my website's Authentication so I came across this amazing Hackathon which was hosted by Auth0 and @Hashnode.
JavaScript in Plain English·5yCreate a dark mode theme switch with Gatsby and TailwindCSS
Dark mode support is a recent feature in almost every technology. While working with gatsby to create my portfolio, I couldn’t find an easy guide. After so much research, I was able to come up with this solution. And I believe this solution will also help you to easily get things to build up.
DEV·5yI created 8 free dashboard templates built with Tailwind for React, Next, Vue and Nuxt.
Salvia-kit is an open source dashboard tool for React, Next.js, Vue.js and Nuxt. It is fully customizable and without external dependencies. You can export it and integrate it in your project. There are 33 repositories and each dashboard has 4 templates.
Hashnode·5yResponsive design with TailwindCSS
TailwindCSS is a CSS function for making a responsive site. Tailwind uses a mobile-first system, similar to Bootstrap. Every utility class in Tailwind can be applied conditionally at different breakpoints. This makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.
freeCodeCamp·5yTailwind CSS Components Tutorial – How to get started with Flowbite
Flowbite is an open-source library of web components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers. The project is available on Github and it is open source under the MIT License.
DevDojo·5yCustom Animations in TailwindCSS
Tailwind provides some simple animations out of the box. If you're not familiar with these animations, be sure to check out my post on TailwindCSS Animations here. These simple animations are pretty cool; however, we may want to add some custom animations to our websites and applications. Let's learn about how to do that.
Product Hunt·5yColorHub - Find the perfect color palette for your next project
ColorHub helps web developers find the perfect color palette for their next project. Simply select a palette, edit and preview it on a range of layouts, and export a CSS, SCSS or Tailwind snippet in seconds. Use the ColorHub tool to help you with your next web project.