Tailwind

tailwind

I’ve been using the same animation pattern in my projects for a while now to animate elements onto the screen. In its simplest form, you would have an element styled with the opacity of zero, then change the styling to have an opacity of one with a CSS transition of a second. We can build on top of that by adding other properties that transition, changing the duration, adding a delay, or setting custom easing. is a reusable React component that I’ve made to drop in whenever I want to quickly add some animation effects to my projects. A simple utility component, it combines CSS Animation with Tailwind classes to create fluid, eye-catching animations with minimal effort. <AnimateIn/> Let’s take a look at how it is used. After importing the component, define and states with Tailwind classes. Wrap the target element within to see the animation come to life. from to <AnimateIn/> import AnimateIn from '../animation/AnimateIn';

<AnimateIn 
  from="opacity-0 scale-90" 
  to="opacity-100 scale-100"
  duration={500}
>
  <YourComponent />
</AnimateIn> Here’s a slightly more complex example that uses more properties to animate in a headline and subtitle. import AnimateIn from '../animation/AnimateIn';

<header>
  <AnimateIn 
    as="h1"
    from="opacity-0 translate-y-32" 
    to="opacity-100 translate-y-0"
    delay={500}
    duration={300}
    className="text-4xl"
    style={{transitionTimingFunction:"cubic-bezier(0.25, 0.4, 0.55, 1.4)"}}
  >
    My Big Headline
  </AnimateIn>
  <AnimateIn 
    as="h2"
    from="opacity-0 scale-0" 
    to="opacity-100 scale-100"
    delay={800}
    duration={500}
    className="text-lg"
  >
    This is a subtitle below the headline
  </AnimateIn>
</header> In the headline example, is used to create a sliding effect combined with a fade-in. Here’s how each property contributes to the animation: <AnimateIn/> property: By setting , we tell AnimateIn to render the animation as an element. as as="h1" <h1> and properties: The property starts the headline off-screen ( , moving it 32 units down) and invisible ( ). The property then brings the headline to its final position (back to ) and makes it fully visible ( ). from to from translate-y-32 opacity-0 to translate-y-0 opacity-100 property: The animation is set to begin immediately with no delay and runs for a quick 300ms. duration property: The applies Tailwind's utility class to set the font size, making the headline prominently stand out. className className="text-4xl" property: The custom ( ) adds a unique ease to the animation, giving it a bounce-like effect. style transitionTimingFunction cubic-bezier(0.25, 0.4, 0.55, 1.4) The subtitle uses a different set of animations to complement the headline, creating a cohesive visual flow. property: Here, renders the component as an element, suitable for a subtitle. as as="h2" <h2> and properties: The subtitle starts scaled down to zero ( ) and invisible ( ), then scales up to its natural size ( ) and becomes fully visible ( ). This scaling effect, paired with a fade-in, adds depth to the animation. from to scale-0 opacity-0 scale-100 opacity-100 and properties: The subtitle also starts after an 800ms delay so that it begins after the headline has fully animated. This staggered approach ensures that each element gets its moment of focus. delay duration property: The sets the subtitle's font size, making it smaller than the headline but still significant. className className="text-lg" To better understand what’s happening, let’s look at the source code for : <AnimateIn/> on Github uses a hook to initialize the animation state with the property, which should be one or more Tailwind utility classes, setting the stage for the animation’s starting point before any animation takes place. <AnimateIn/> useState from The first hook in the component is for respecting user preferences for reduced motion. By listening to the media query, the animation behavior is based on the user’s system settings. If reduced motion is preferred, the animation is skipped entirely, directly setting the animation state to the property, allowing for an accessible experience. useEffect (prefers-reduced-motion: reduce) to The second hook is where the animation logic resides. If the user has not indicated a preference for reduced motion, the component sets a timer that changes the animation state from the initial value to the final value after the specified delay. This transition creates the visual effect of animation. useEffect from to The cleanup function of this hook (the return statement) clears the timer, preventing potential memory leaks such as if the component unmounts before the animation is completed. The function call is the component’s rendering mechanism. It dynamically creates an HTML element based on the prop, allowing the use of the component across different HTML elements. The is constructed using the function as , which combines Tailwind’s utility classes, the custom passed as a prop, and the current animation state. This dynamic class assignment is what applies the desired styles and transitions to the element. React.createElement as className cn popularized by shadcn className Additionally, there is a attribute that can be passed in to directly set styling properties on the animation container. The is set based on the prop, but it intelligently switches to if the user prefers reduced motion, effectively disabling the animation while maintaining the component’s functionality. style transitionDuration duration 0ms If you’d like to use in your own project and it already uses , then you already have everything you need, just and add it to your components. <AnimateIn/> shadcn download AnimateIn.tsx Otherwise, you’ll want to as well as the for merging tailwind classes. install Tailwind mxcn helpful utility Like shadcn, <AnimateIn/> is meant to be a reusable component that you can copy and paste into your apps and customize to your needs. The code is yours. Also, I’ve put together a nice demo page for playing around with creating different animations with at . <AnimateIn/> animate-in.vercel.app Also published here

I Created a React Utility Component for Animations With Tailwind and CSS: AnimateIn

আমি Tailwind এবং CSS এর সাথে অ্যানিমেশনের জন্য একটি প্রতিক্রিয়া ইউটিলিটি উপাদান তৈরি করেছি: AnimateIn

Ich habe eine React-Utility-Komponente für Animationen mit Tailwind und CSS erstellt: AnimateIn

Creé un componente de utilidad React para animaciones con Tailwind y CSS: AnimateIn

J'ai créé un composant utilitaire React pour les animations avec Tailwind et CSS : AnimateIn

मैंने टेलविंड और सीएसएस के साथ एनिमेशन के लिए एक रिएक्ट यूटिलिटी कंपोनेंट बनाया: एनिमेटइन

Tailwind と CSS を使用してアニメーション用の React ユーティリティ コンポーネントを作成しました: AnimateIn

Tailwind 및 CSS를 사용하여 애니메이션용 React 유틸리티 구성 요소를 만들었습니다: AnimateIn

Criei um componente utilitário React para animações com Tailwind e CSS: AnimateIn

Я создал служебный компонент React для анимации с помощью Tailwind и CSS: AnimateIn

Tailwind ve CSS ile Animasyonlar için React Utility Bileşeni Oluşturdum: AnimateIn

Tôi đã tạo một thành phần tiện ích React cho hoạt ảnh bằng Tailwind và CSS: AnimateIn

我使用 Tailwind 和 CSS 创建了一个用于动画的 React 实用组件：AnimateIn

While I was at Algolia’s Paris office last week, Dhaya Benmessaoud from our Front-end Experience team showed me a cool trick for styling Algolia’s React widgets in your UI. Out-of-the-box, Algolia provides a couple of pre-built themes for search experiences (Algolia and Satellite) as well as the ability to create custom themes. Recently, the front-end experience team has added a third way to style your UI, by into your Algolia injecting custom CSS classes React components. This is great news for people who use class-based like Bootstrap and ! In my case, I was working with the Algolia , which relies on Tailwind for styling. I wanted to add a widget from the Algolia Recommend UI library to my homepage, but I wanted to style it using Tailwind classes to match the rest of my front-end. CSS frameworks Tailwind Ecommerce UI Template <TrendingFacets> Here’s how it looks before styling: I can definitely do better! To accomplish this, I need to use the attribute for my component. It’s available for all of Algolia’s React widgets (including Recommend) and it allows you to override styling on component-specific elements. Some of our other front-end APIs like Vanilla JavaScript ( ) and Vue ( ) have had this functionality for years, and now it’s available in React thanks to the recent refresh that added React hooks. classNames cssClasses class-names The documentation lists the elements I can override for each Algolia widget. For instance, here are the elements of a widget: <SearchBox> : The root element of the widget. root : The form element. form : The input element. input : The submit button. submit : The reset button. reset : The loading indicator element. loadingIndicator : The submit icon. submitIcon : The reset icon. resetIcon : The loading icon. loadingIcon For my widget, I want the list in a horizontal line to conserve space, so I add a class to its element. I’ll also add a new class to give each a nice capsule shape with some simple hover styling. Here’s how my component looks after styling. <TrendingFacets> flex list facetItem item And here’s the code: <TrendingFacets
  classNames={{ list: 'flex', item: 'facetItem' }}
  recommendClient={recommendClient}
  indexName={indexName}
  maxRecommendations={3}
  itemComponent={({ item }) => (
    <a href={item.facetValue}>{item.facetValue}</a>
  )}
  facetName={facetName}
/> Adding to customize the style of Algolia widgets makes so much sense, especially for people like me who are addicted to Tailwind CSS for styling front-ends. You can read more about adding custom CSS classes to widgets in the . If you’re new to Algolia, you can try it out by signing up for a . classNames Algolia documentation free tier account Also published here.

Using Tailwind Classes to Customize Algolia React Components

Tailwind is an increasingly popular and widely used framework, which makes it easier in some cases to build and ship features and products. In this guide, we'll be covering how you can vertically and horizontally center an element or text with tailwind. In another article, I've already covered how to center an HTML element both horizontally and vertically using CSS. If you want to learn about that, . click here Horizontally and Vertically center an element with Tailwind Horizontally and vertically centering something with Tailwind is easy with . All we have to do is three things: flexbox use to make the element the height of the screen h-screen use to make the element a flex flexbox use to vertically center it items-center use to center it horizontally justify-center Our code then looks like this: <div class="h-screen flex items-center justify-center">
    Horizontally and Vertically Centered Element
</div> Which produces a result like this: See the Pen by smpnjn ( ) on . Horizontally and vertically centering with Tailwind @smpnjn CodePen Vertically centering an element with Tailwind The easiest way to vertically center something is to do what we did before, and use . This time, though, we'll remove . The item will then be centered only along the vertical axis. flexbox justify-center <div class="h-screen flex items-center">
    Vertically Centered Element
</div> You can see an example of this in the codepen below: See the Pen . here Horizontally centering an element with Tailwind In the same way that we vertically centered the div above, we can also horizontally center using our previous approach. The code for that looks like this: <div class="flex justify-center items-center">
    Horizontally Centered Element
</div> This is the same code we used for horizontal and vertical centering, just without . Here's the result: h-screen See the Pen here. Conclusion Centering elements with flexbox is easy in Tailwind. In this guide, we've learned how to vertically and horizontally center elements including HTML elements and text - which is infinitely useful in web development. To learn more about in general, you can . CSS find my other content here Also published here.

How to Centre an Element in CSS with Tailwind

Tailwind CSS is a framework that you’ve probably seen around quite often now and it looks like the technology is being adopted by more and more web developers. What’s unique about this framework is that it uses utility classes instead of OOCSS or BEM and instead of a CSS preprocessing language it relies on PostCSS for transforming CSS. Although we’ve seen quite a spectacular growth for Tailwind CSS this year (433% increase in weekly downloads based on NPM Trends), one thing that’s missing is a set of UI components that can be used to speed up the development process. In this article, I want to introduce you to one of the most popular component libraries based on Tailwind CSS and it’s called Flowbite. It’s an under the MIT license. open-source project available on Github I’ll show you how to get started by installing Flowbite as a plugin for Tailwind CSS and show you some of the components and features that it has. What is Tailwind CSS? is a utility-first framework created by Adam Wathan which redefines the way you interact with stylesheets by moving the CSS logic right into your HTML by using utility classes for spacing, sizing, colors, fonts, and more. Tailwind CSS With the release of the JIT mode the compilation and the number of utility classes that can be used when developing a project increased significantly. What is Flowbite? is a set of UI components built with the utility classes from Tailwind CSS including buttons, dropdowns, modals, tabs, navbars, and more. It can be installed via NPM and included as a plugin inside a new or existing Tailwind CSS project. Flowbite Getting started The first thing you need to do is have a working Tailwind CSS project installed locally. If you haven’t done that yet, I recommend you to check out the on the documentation. installation guide After you’ve done that, you can follow the and learn how to download and install the project. quickstart guide from Flowbite You should first install the Flowbite package via NPM: npm i flowbite Then require the plugin inside the file: tailwind.config.js module.exports = {

    plugins: [
        require('flowbite/plugin')
    ]

} Finally, make sure that the JavaScript file is included just before the closure of your tag: <body <script src="../path/to/flowbite/dist/flowbite.js"></script> Flowbite works with both Tailwind CSS v2.x and v3.x versions. Tailwind CSS components within Flowbite Now that you have a working Tailwind CSS project with Flowbite installed as a plugin you can now start exploring the from the library. Tailwind CSS components The full list of components are as follows: Alerts Badge Breadcrumbs Buttons Button group Cards Dropdowns Forms List groups Typography Modals Tabs Navbar Pagination Progress bar Tables Tooltips Datepicker Here’s an example of a couple of gradient background : buttons from the library <button type="button" class="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Purple to Blue</button>
<button type="button" class="text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Cyan to Blue</button>
<button type="button" class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Green to Blue</button>
<button type="button" class="text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:ring-purple-200 dark:focus:ring-purple-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Purple to Pink</button>
<button type="button" class="text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Pink to Orange</button>
<button type="button" class="text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-4 focus:ring-lime-200 dark:focus:ring-teal-700 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Teal to Lime</button>
<button type="button" class="text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:ring-red-100 dark:focus:ring-red-400 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Red to Yellow</button> As you can see, all of the classes from these elements are based on the Tailwind CSS utility classes and there’s also dark mode support included. Another example would be the dropdown elements which also requires the JavaScript file to be included: <button id="dropdownButton" data-dropdown-toggle="dropdown" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">Dropdown button <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></button>

<div id="dropdown" class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700">
  <ul class="py-1" aria-labelledby="dropdownButton">
    <li>
      <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Dashboard</a>
     </li>
    <li>
      <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Settings</a>
    </li>
    <li>
      <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Earnings</a>
    </li>
    <li>
      <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Sign out</a>
    </li>
  </ul>
</div> For the , you can use the data attribute to connect the menu with the button using the event listeners from Flowbite. dropdown component data-dropdown-toggle=”dropdownId” I’ll show you one more example from the section: form components <form>
  <div class="mb-6">
    <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your email</label>
    <input type="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@flowbite.com" required="">
  </div>
  <div class="mb-6">
      <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your password</label>
      <input type="password" id="password" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
  </div>
  <div class="flex items-start mb-6">
    <div class="flex items-center h-5">
      <input id="remember" aria-describedby="remember" type="checkbox" class="w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" required="">
    </div>
    <div class="ml-3 text-sm">
      <label for="remember" class="font-medium text-gray-900 dark:text-gray-300">Remember me</label>
    </div>
  </div>
  <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>
</form> The form components include custom styles and variants for text inputs, checkboxes, radio buttons, toggle buttons, file uploads, and many more. How to use dark mode All of the components from Flowbite already support dark mode and since the release of Tailwind CSS v3.x, these styles will be automatically applied based on your browser preference. If you want to create a dark mode switcher, you can check out the official guide on Flowbite on how to integrate a . dark mode switcher with Tailwind CSS Figma design files If you’re a fan of the Figma software design tool, you’ll be happy to learn that Flowbite also has a included based on the utility classes from Tailwind CSS. Figma design file You can use this design file to prototype and design your components and pages before coding them with Tailwind CSS and Flowbite.

How to Get Started with Flowbite, an Open Source Tailwind CSS component Library

Cómo comenzar con Flowbite, una biblioteca de componentes CSS de Tailwind de código abierto

Hi everybody, I'm Charlie, a french JS developer 🇫🇷. I just release a free and open source project, . It's a kit of components and templates fully coded with tailwind css 2.0 ready to copy paste. tail-kit The link : https://www.tailwind-kit.com The Github : https://github.com/Charlie85270/tail-kit Made with React + NextJS + Typescript 🔥 What do you think of this project ? 🙂 All comments, likes, shares, stars, contributions are welcome and really help me to improve the kit ! 👊 Here is an overview of some features Live code editor Tail-kit include a live code editor, you can change the components or templates code and see in live your modifications. Dark mode Most components and templates are implemented with a light and dark version, with the new dark mode 2.0 feature of tailwind CSS. Tai-kit contains some templates like landing pages, folio pages ect. All are fully Coded and ready to copy paste. and may other things will coming soon....

Tail-kit Introduction: 200+ Free Tailwind CSS Components And Templates

You've probably heard of Tailwind by now, but if you haven't, it is essentially a utility-first CSS framework and is much less opinionated compared to other CSS frameworks like Bootstrap and Foundation. According to , it is described as: tailwindcss.com A highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. In my opinion, this makes Tailwind a great option to use for your projects. You get the benefits of rapid development, without the opinionated styles that you ultimately override anyway. So what if we want to use Tailwind with React, is it as simple as just including a style sheet? Not exactly. Because of how Tailwind is built and some of the optimizations they have in place (i.e. purging unused CSS), there are a couple of extra steps to properly set it up in a React project. Getting the Project Setup To get started, either jump into your own React project or start up a new one with . npx create-react-app tailwind-react-app Installing Dependencies Next, let's install a couple of dependencies via . npm i @fullhuman/postcss-purgecss postcss-cli tailwindcss --save-dev A brief explanation of each dependency: - used to purge unused CSS to create the smallest final CSS file possible. If you don't purge unused CSS, tailwind is actually over 2MB uncompressed. fullhuman/postcss-purgecss - Tailwind is a PostCSS plugin. You don't need to use PostCSS as the preprocessor, but in this case we will in order to keep things simple. postcss-cli - the Tailwind library and utilities tailwindcss Creating Config Files Now that we have our dependencies installed, we need to create a couple of config files. First, create your Tailwind config by running in the project root. You can choose to update some of the Tailwind config here if you wish. npx tailwind init Next, create your PostCSS config by creating a file in the project root and adding the following content: postcss.config.js purgecss = ( )({ : [ , , ], : content.match( ) || [],
}); .exports = { : [ ( ),
    ...(process.env.NODE_ENV === ? [purgecss] : []),
  ],
}; const require '@fullhuman/postcss-purgecss' content './src/**/*.js' './src/**/*.jsx' './public/**/*.html' defaultExtractor ( ) => content /[A-Za-z0-9-_:/]+/g module plugins require 'tailwindcss' 'production' In the first portion, we require and setup PurgeCSS. This requires two pieces. The first is the list of purgeable files which are js, jsx, and html (you can also add ts and tsx if you use TypeScript). The HTML is required so the base styles (e.g. body, html, etc) don't get purged. The second portion is used to define the extractor function (i.e. rules for which content to keep). PurgeCSS is naive by nature, meaning it will look for content that matches that Regex in the file types listed above. This is important to know and will be revisited when we discuss patterns below. Importing Tailwind CSS Now that we have our dependencies installed and our config files setup, we can actually add the Tailwind CSS file to our app. To begin, create a file in the folder with the following Tailwind directives: tailwind.css src/ @tailwind base;
@tailwind components;
@tailwind utilities; This will pull in and compile the styles for us automatically when we build our Tailwind output. It's also useful to note that this file is where we could add our own Tailwind custom utilities if we wanted. For more information on adding new utilities, . click here Finally, let's import the output file (which we will create via the build scripts in the next section) to our so it is available globally throughout our app. app.js ; import './tailwind.output.css' You may need to change the path if your isn't directly in the root of the source folder, as that is where this will output by default. app.js Setting Up Build Scripts The last step to get Tailwind working is to create a couple of quick build scripts to ensure that the output file gets built. Let's add the following to our scripts section in : package.json : , : , : , : , "tailwind:build" "NODE_ENV=production postcss src/tailwind.css -o src/tailwind.output.css" "tailwind:dev" "postcss src/tailwind.css -o src/tailwind.output.css" "prestart" "npm run tailwind:dev" "prebuild" "npm run tailwind:build" There are two separate Tailwind scripts we created. The first one is for production builds (i.e. run the PurgeCSS we defined above), whereas the second one is a dev build which keeps the full Tailwind CSS since we want to access all the styles as we're developing. :build The next part is the where we run the dev build prior to staring up the React development server. You could take it a step further and add a watch script that checks for changes to , but I've found that additions / changes to this file are pretty rare, so I simply restart the dev server if this comes up. prestart tailwind.css Finally, the last part is the script which runs the production (purged) Tailwind build which will result in a CSS file that only contains styles we've actually used in our app. prebuild That's it! You should now be up and running with Tailwind in your React app. If you're looking to take it a step further, in the next section I'll go over some design patterns and common gotchas when dealing with Tailwind in React. Design Patterns Now that we have Tailwind running within our app, when we can discuss some design patterns that make it easy to work with in React components. What Not To Do Before jumping into some patterns, I think it's worth mentioning what not to do. How you decide to use Tailwind in your app is ultimately up to your preference, but there is one common mistake that can quickly get you into some trouble and it relates to the purging of the unused CSS as I mentioned above. Let's look at an example to illustrate the issue. Assume we have a basic input component as follows: <input className= type= /> "border-2 border-gray-300 p-2" "text" Now, let's say we want to conditionally change the border to red if there is an error somewhere. If we have an state / prop variable, we may be tempted to do something like: error <input
  className={ }
  type= /> `border-2 border- p-2` ${error ? : } 'red-500' 'gray-300' "text" At first glance, this looks correct. In fact, it would render the correct classes and work just fine in development. However, once you build the production version of your app, you would notice these styles are missing, but why is that? As mentioned earlier, PurgeCSS runs against our production build to create the smallest Tailwind CSS file possible. It simply looks at the file types your provided and tries to find content matching the Regex. In this case, when it checks this component file, it won't match on or because they are built dynamically. border-red-500 border-gray-300 So, how do we avoid this? The easiest way is to always ensure when writing Tailwind classes in your code, the full class name is there and isn't built dynamically. Therefore, using the above example, we get: <input
  className={ }
  type= /> `border-2 p-2` ${error ? : } 'border-red-500' 'border-gray-300' "text" Now when PurgeCSS runs against this file, it will keep all of our added classes. Let's take a look at some basic Tailwind patterns we can use in our app now that we know what not to do. Basic Patterns A pattern I've been using for a little while now is one that involves defining all of your classes above the component in an object with strings for each element. For example, here is a basic component: Using the above pattern, the component code would look like: classes = { : , : ,
}; BasicComponent = { ( <h1 className={classes.title}>Basic Component</h1> );
}; const wrapper 'border-2 m-16 p-16' title 'text-gray-800 text-xl text-center font-bold' const => () return < = > div className {classes.wrapper} </ > div This basic pattern has a couple of nice benefits: It keeps the component definition clean, especially if there are a number of elements or if class names get long It makes it easy to reuse classes in multiple places. Also, if you need to change styles, you only do it in one place in the component All classes are fully defined in the file, so there are no issues with PurgeCSS You get a nice overview of all styles for your component in one neat place With that said, what do we do when we get more advanced components that need to change as state or props change in our app? Let's take a look at a more advanced pattern that expands on this. Advanced Pattern Now that we have a basic pattern involving the definition of all our classes above our component, we can take it a step further when we start to have more dynamic components. For example, here is a more dynamic component: In the above screenshot, both the button and the subtitle text change when the button is clicked on. Let's look at the code for this component: classes = { : , : , : , : , : ,
}; AdvancedComponent = { [active, setActive] = useState( ); ( <h1 className={classes.title}>Advanced Component</h1> <p className={classes.description(active)}>
        I change based on the button click state.
      </p> <button
        className={clsx([classes.button, active && classes.buttonActive])}
        onClick={() => setActive((prevState) => !prevState)}
      >
        Click Me
      </button> );
}; const wrapper 'border-2 m-16 p-16 text-center' title 'text-gray-800 text-xl font-bold' description ( ) => active `my-6 ` ${active ? : } 'text-red-900 font-medium' 'text-gray-800' button 'py-2 px-4 bg-gray-100 border-2 focus:outline-none' buttonActive 'bg-gray-400' const => () const false return < = > div className {classes.wrapper} </ > div The first thing to notice is the class. Unlike the others, this one is a function that takes in a parameter (or multiple) and outputs a slightly different class (text color and font weight in this case) string as a result. This allows you to maintain the benefits of the basic design pattern, but also add in a conditional aspect as well. It's also import to note, the classes are still fully defined as well so PurgeCSS will still have no issues. description Another method of creating dynamic classes while maintaining the basic pattern is what was done with the and classes. In this case, the module was used to dynamically add classes based on conditions. The class was added without conditions (the base styles), however is only added if is true. This method also works well when you have a number of conditionally added classes to an element or if your classes are just getting a little out-of-hand and you want to break them down a bit. Once again, PurgeCSS will work fine with this method as the underlying classes are fully defined. button buttonActive clsx classes.button classes.buttonActive active Conclusion I hope this helped get you up and running with Tailwind on your React app and gives you some inspiration on how you can use it within your components in a way that makes it easier to work with. If you have any questions, suggestions, or run into any issues, feel free to . reach out on Twitter You can find all source code for this post in a starter template . here Previously published at https://rfitz.io/blog/tailwind-with-react/

An Introductory Guide to Tailwind and React: Setup and Design Patterns

There is an annual developer survey called State of CSS which explores which tools developers use to produce CSS code, what are the current industry preferences and sentiments. Looking at the results of section "CSS frameworks" a Tailwind has been an indisputable leader in satisfaction rankings for consecutive 4 years from 2019 to 2023, meaning it has been so since its initial release in May 2019. No wonder it accumulated usage rankings throughout these 4 years from 6% in 2019 to 50.5% in 2023 making it the 2nd most popular CSS framework after Bootstrap. I would not call myself a huge fan of Tailwind and to be honest I was a bit skeptical about it for quite some time. But I think I understand the appeal to it. In this article I will try to explore why Tailwind and other utility CSS solutions are so popular and what I think the future holds for it. But first a little bit of history Let's get back to 2013 when the first commits to Basscss were made public. While traditional CSS frameworks at the time focused on certain components, like alerts, inputs, modal windows, etc., Basscss took a different approach focusing on abstract non-semantic utilities. For instance, take a look at Bootstrap. It has alert which is a certain semantic component with a well-defined purpose. There are even more complex components like dropdown and components that combine multiple ones, but there is always semantics in mind. It's almost impossible to reuse the parts of alert component in a dropdown - it doesn't make any sense because they serve different business purposes and therefore their semantics are completely different. Basscss does not have any of this. Zero components. What it has is a set of simple and pre-defined CSS rules that could be used in any context where this rule is suitable to be applied. Check this out. .m0 {
  margin: 0;
}

.p0 {
  padding: 0;
} Using narrow utility classes aimed to be highly reusable. Consider the following CSS code. .success {
  background-color: green;
  color: white;
} You can use .success class only when both `green` background and white text color are required. You would need to create a new class with a different name when only one rule of these two is required. Basscss confronts the semantic CSS approach. Instead of coming up with a class name and assigning properties for a specific semantic meaning <style>
  .panel {
    margin: 0;
    padding: 0;
  }
</style>
<div class="panel">This is a panel</div> you use multiple classes like m0 and p0 mentioned above to achieve the same effect. <style>
  .m0 {
    margin: 0;
  }

  .p0 {
    padding: 0;
  }
</style>
<div class="m0 p0">This is a panel</div> Basscss contains shorthands not only for padding and margin, but for typography, borders, positions, colors, etc. It was a strange approach but it got its fans and its own name called "Atomic CSS" inspiring a lot of other frameworks. One of them was Tachyons which introduced pseudo-classes for :hover, :active, :focused. In this example zero margin is applied only when an element is hovered. <div class="ma0:hover">This is a panel</div> Another framework was ACSS, now known as Atomizer which used even more complex syntax and required a build step. <div class="M(0)">This is a panel</div> Inline styles or something more? At first sight it looks like an inline styling, but it is actually more than that. It is a composition tool giving us an ability to construct different small pieces of software to produce a complete solution. This is exactly what we are getting by using Basscss and other atomic CSS solutions. To achieve high quality composition one needs to have pieces of software that are reusable in different semantic contexts
easily combined with each other in an arbitrary way Going back to the example of .success class let's break it down into 2 classes .bg-green {
  background-color: green;
}

.color-white {
  color: white;
} By splitting the .success class we are no longer tied to a certain semantic and we can reuse individual classes in completely different and unrelated to each other contexts combining them with other such classes. And finally… Tailwind Of course, Tailwind took inspiration from all of the libraries mentioned above. Composition is the core concept in Tailwind and that’s how developers are expected to reason about it - by composing utility classes forming complex components. It focuses on being easy to use and very friendly to newcomers and developers who are not keen on frontend development. What Tailwind got right is a good balance between API and functionality and a tooling which has nice defaults being highly-configurable at the same time.  But is it actually a sustainable story? Critics of functional CSS. There are a lot of critics of utility (functional) CSS. But I would mention only one, which is the strongest one, and that is mixing markup and styling results in having a messy class string in HTML. <div class="bg-indigo-500 text-white px-4 py-2 rounded-md shadow-md hover:bg-indigo-600 transition duration-200 ease-in-out cursor-pointer flex items-center justify-center"> You might argue that it is a developer’s responsibility to keep it clean, but it is actually quite common to see this. Tailwind does not offer a way to clean the long class strings other than apply directive but even that is discouraged by Adam himself. Here is a quote. I can say with absolute certainty that if I started Tailwind CSS over from scratch, there would be no `@​apply`
The behavior is outrageously complicated, everyone struggles to build the right mental model of what it's supposed to do, and it encourages bad CSS architecture. And it makes sense, because it defeats the whole purpose of writing utility CSS in the first place. Why even bother with it if you end up writing a separate semantic class name with a vendor specific keyword? You don’t need a library for that, just write a plain CSS. Another way to fight it is to use a component based approach with a JavaScript library of your choice (React, Vue, etc.) and use something like tailwind-variants. This is also not a new concept, as it was popularized by styled-system, a Basscss author by the way. It works, and it works great despite introducing an imminent complexity. But it still leaves critics with the question: Why go through all the hassle when I could just write a CSS class? For now I will leave this question open. But I’m sure in the future we will see new approaches as CSS standards are constantly evolving. There is an annual developer survey called State of CSS which explores which tools developers use to produce CSS code, what are the current industry preferences and sentiments. State of CSS Looking at the results of section "CSS frameworks" a Tailwind has been an indisputable leader in satisfaction rankings for consecutive 4 years from 2019 to 2023, meaning it has been so since its initial release in May 2019. No wonder it accumulated usage rankings throughout these 4 years from 6% in 2019 to 50.5% in 2023 making it the 2nd most popular CSS framework after Bootstrap. "CSS frameworks" 6% in 2019 50.5% in 2023 I would not call myself a huge fan of Tailwind and to be honest I was a bit skeptical about it for quite some time. But I think I understand the appeal to it. In this article I will try to explore why Tailwind and other utility CSS solutions are so popular and what I think the future holds for it. But first a little bit of history Let's get back to 2013 when the first commits to Basscss were made public. While traditional CSS frameworks at the time focused on certain components, like alerts, inputs, modal windows, etc., Basscss took a different approach focusing on abstract non-semantic utilities. Basscss For instance, take a look at Bootstrap. It has alert which is a certain semantic component with a well-defined purpose. There are even more complex components like dropdown and components that combine multiple ones, but there is always semantics in mind. It's almost impossible to reuse the parts of alert component in a dropdown - it doesn't make any sense because they serve different business purposes and therefore their semantics are completely different. alert dropdown semantics Basscss does not have any of this. Zero components. What it has is a set of simple and pre-defined CSS rules that could be used in any context where this rule is suitable to be applied. simple pre-defined Check this out. .m0 {
  margin: 0;
}

.p0 {
  padding: 0;
} .m0 {
  margin: 0;
}

.p0 {
  padding: 0;
} Using narrow utility classes aimed to be highly reusable . Consider the following CSS code. highly reusable .success {
  background-color: green;
  color: white;
} .success {
  background-color: green;
  color: white;
} You can use .success class only when both `green` background and white text color are required. You would need to create a new class with a different name when only one rule of these two is required. Basscss confronts the semantic CSS approach. .success white Instead of coming up with a class name and assigning properties for a specific semantic meaning semantic <style>
  .panel {
    margin: 0;
    padding: 0;
  }
</style>
<div class="panel">This is a panel</div> <style>
  .panel {
    margin: 0;
    padding: 0;
  }
</style>
<div class="panel">This is a panel</div> you use multiple classes like m0 and p0 mentioned above to achieve the same effect. m0 p0 <style>
  .m0 {
    margin: 0;
  }

  .p0 {
    padding: 0;
  }
</style>
<div class="m0 p0">This is a panel</div> <style>
  .m0 {
    margin: 0;
  }

  .p0 {
    padding: 0;
  }
</style>
<div class="m0 p0">This is a panel</div> Basscss contains shorthands not only for padding and margin, but for typography, borders, positions, colors, etc. It was a strange approach but it got its fans and its own name called "Atomic CSS" inspiring a lot of other frameworks. One of them was Tachyons which introduced pseudo-classes for :hover, :active, :focused. Tachyons In this example zero margin is applied only when an element is hovered. <div class="ma0:hover">This is a panel</div> <div class="ma0:hover">This is a panel</div> Another framework was ACSS, now known as Atomizer which used even more complex syntax and required a build step. <div class="M(0)">This is a panel</div> <div class="M(0)">This is a panel</div> Inline styles or something more? At first sight it looks like an inline styling, but it is actually more than that. It is a composition tool giving us an ability to construct different small pieces of software to produce a complete solution . This is exactly what we are getting by using Basscss and other atomic CSS solutions. composition an ability to construct different small pieces of software to produce a complete solution To achieve high quality composition one needs to have pieces of software that are reusable in different semantic contexts easily combined with each other in an arbitrary way reusable in different semantic contexts easily combined with each other in an arbitrary way Going back to the example of .success class let's break it down into 2 classes .success .bg-green {
  background-color: green;
}

.color-white {
  color: white;
} .bg-green {
  background-color: green;
}

.color-white {
  color: white;
} By splitting the .success class we are no longer tied to a certain semantic and we can reuse individual classes in completely different and unrelated to each other contexts combining them with other such classes. .success And finally… Tailwind Of course, Tailwind took inspiration from all of the libraries mentioned above. Composition is the core concept in Tailwind and that’s how developers are expected to reason about it - by composing utility classes forming complex components. It focuses on being easy to use and very friendly to newcomers and developers who are not keen on frontend development. What Tailwind got right is a good balance between API and functionality and a tooling which has nice defaults being highly-configurable at the same time.  But is it actually a sustainable story? Critics of functional CSS. There are a lot of critics of utility (functional) CSS. But I would mention only one, which is the strongest one, and that is mixing markup and styling results in having a messy class string in HTML. a messy class string in HTML. <div class="bg-indigo-500 text-white px-4 py-2 rounded-md shadow-md hover:bg-indigo-600 transition duration-200 ease-in-out cursor-pointer flex items-center justify-center"> <div class="bg-indigo-500 text-white px-4 py-2 rounded-md shadow-md hover:bg-indigo-600 transition duration-200 ease-in-out cursor-pointer flex items-center justify-center"> You might argue that it is a developer’s responsibility to keep it clean, but it is actually quite common to see this. Tailwind does not offer a way to clean the long class strings other than apply directive but even that is discouraged by Adam himself . Here is a quote. discouraged by Adam himself I can say with absolute certainty that if I started Tailwind CSS over from scratch, there would be no `@​apply` The behavior is outrageously complicated, everyone struggles to build the right mental model of what it's supposed to do, and it encourages bad CSS architecture. I can say with absolute certainty that if I started Tailwind CSS over from scratch, there would be no `@​apply` The behavior is outrageously complicated, everyone struggles to build the right mental model of what it's supposed to do, and it encourages bad CSS architecture. And it makes sense, because it defeats the whole purpose of writing utility CSS in the first place. Why even bother with it if you end up writing a separate semantic class name with a vendor specific keyword? You don’t need a library for that, just write a plain CSS. Why even bother with it if you end up writing a separate semantic class name with a vendor specific keyword? Another way to fight it is to use a component based approach with a JavaScript library of your choice (React, Vue, etc.) and use something like tailwind-variants . This is also not a new concept, as it was popularized by styled-system, a Basscss author by the way. It works, and it works great despite introducing an imminent complexity. tailwind-variants But it still leaves critics with the question: Why go through all the hassle when I could just write a CSS class? Why go through all the hassle when I could just write a CSS class? Why go through all the hassle when I could just write a CSS class? Why go through all the hassle when I could just write a CSS class? For now I will leave this question open. But I’m sure in the future we will see new approaches as CSS standards are constantly evolving.

Why Functional CSS Got so Popular?

In this tutorial, we will guide you through the process of creating a dynamic form Repeater component using Next.js with the support of . Next.js Tailwind CSS We're using Next.js as a React framework, but you can choose the one you want. I encourage you to follow React's recommendations This article is an extension of this one: . Creating a Vue 3 Form Repeater Component: A Step-by-Step Guide I experienced the need of building one component like this one in a Vue project. This is the same tutorial with the same functionality but for React. As an example for this tutorial, we’re creating a multi-destination dynamic form. By leveraging the latest version of Next.js and the utility-first approach of Tailwind CSS, we can build an intuitive and responsive form repeater that enhances the user experience. Let’s get started! 1. Set Up Your Next.js Project To get started, ensure you have Node.js installed on your machine. You can create a new Next.js project using the following commands in your terminal: npx create-next-app next-form-repeater
cd next-form-repeater 2. Install and Set Up Tailwind CSS Next, install Tailwind CSS and its peer dependencies: npm install tailwindcss@latest postcss@latest autoprefixer@latest Create a file in the root of your project with the following content: tailwind.config.js module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}; Update the file to use Tailwind CSS: styles/globals.css /* styles/globals.css */
@import 'tailwindcss/tailwind.css'; 3. Create the Form Repeater Component Inside the "components" folder of your project, create a new file called "FormRepeater.js".
This file will contain the definition of our custom Form Repeater component. import { useState } from 'react';

const FormRepeater = () => {
  const [fields, setFields] = useState([{ value: '' }]);

  const addField = () => {
    setFields([...fields, { value: '' }]);
  };

  const removeField = () => {
    if (fields.length > 1) {
      setFields(fields.slice(0, -1));
    }
  };

  const onSubmit = () => {
    const formData = {};
    fields.forEach((field, index) => {
      formData[`Destination ${index + 1}`] = field.value;
    });

    // Your submit logic here (e.g., sending the formData to the server or handling it as needed)
    // For demonstration purposes, we'll log the form data to the console.
    console.log('Form data:', formData);
  };

  return (
    <div>
      {fields.map((field, index) => (
        <div key={index}>
          <input
            type="text"
            value={field.value}
            placeholder={`Destination ${index + 1}`}
            onChange={(e) => {
              const updatedFields = [...fields];
              updatedFields[index].value = e.target.value;
              setFields(updatedFields);
            }}
            className="border rounded p-2 mb-2"
          />
        </div>
      ))}
      <button onClick={addField} className="bg-blue-500 text-white px-4 py-2 rounded mr-2">
        Add Destination
      </button>
      <button onClick={removeField} className="bg-red-500 text-white px-4 py-2 rounded">
        Remove Destination
      </button>
      <button onClick={onSubmit} className="bg-green-500 text-white px-4 py-2 rounded mt-4">
        Submit
      </button>
    </div>
  );
};

export default FormRepeater; 4. Using the Form Repeater Component In your main app file (e.g., "pages/index.js"), import and use the Form Repeater component as follows: import FormRepeater from '../components/FormRepeater';

export default function Home() {
  return (
    <div>
      <h1 className="text-3xl font-bold mb-4">Travel Reservations</h1>
      <FormRepeater />
    </div>
  );
} 5. Run Your Next.js App With everything set up, you can now start your Next.js app and see the Form Repeater in action: npm run dev 6. Styling the Form Repeater To add some basic styling to the Form Repeater component, we'll use Tailwind CSS classes.
Open the "FormRepeater.js" file and update the class names for the buttons and inputs to apply styling: // ...
const FormRepeater = () => {
  // ...

  return (
    <div>
      {fields.map((field, index) => (
        <div key={index}>
          <input
            type="text"
            value={field.value}
            placeholder={`Destination ${index + 1}`}
            onChange={(e) => {
              const updatedFields = [...fields];
              updatedFields[index].value = e.target.value;
              setFields(updatedFields);
            }}
            className="border rounded p-2 mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          />
        </div>
      ))}
      <button onClick={addField} className="bg-blue-500 text-white px-4 py-2 rounded mr-2 hover:bg-blue-600">
        Add Destination
      </button>
      <button onClick={removeField} className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">
        Remove Destination
      </button>
      <button onClick={onSubmit} className="bg-green-500 text-white px-4 py-2 rounded mt-4 hover:bg-green-600">
        Submit
      </button>
    </div>
  );
};

export default FormRepeater; 7. Testing the Form Repeater Now that you've added some styling, you can run your Next.js app again and test the Form Repeater component. Open your browser and visit to interact with the Form Repeater. http://localhost:3000 Step 8: Handling Form Submission To handle form submission, we've already implemented the function in the "FormRepeater.js" file. onSubmit Currently, the function logs the form data to the console.
You can replace this with your desired form submission logic, such as sending the form data to a server or storing it in a database. Conclusion Congratulations! You've successfully built a dynamic Form Repeater component using Next.js with the support of Tailwind CSS. By combining the latest version of Next.js and the utility-first approach of Tailwind CSS, you've created an intuitive and responsive form repeater that enhances the user experience. References Next.js documentation: https://nextjs.org/docs Tailwind CSS documentation: https://tailwindcss.com/docs Thanks for reading! The lead image for this article was generated by via the prompt "React code displayed on a screen" HackerNoon's AI Image Generator

Creating a React Form Repeater Component: A Step-by-Step Guide

Build a Web3 Movie Streaming dApp using NextJs, Tailwind, and Sia Renterd

NextJs, Tailwind, এবং Sia Renterd ব্যবহার করে একটি Web3 মুভি স্ট্রিমিং dApp তৈরি করুন

Erstellen Sie eine Web3-Film-Streaming-dApp mit NextJs, Tailwind und Sia Renterd

Cree una aplicación de transmisión de películas Web3 con NextJs, Tailwind y Sia Renterd

Créez une dApp de streaming de films Web3 à l'aide de NextJs, Tailwind et Sia Renterd

NextJs, Tailwind और Sia Renterd का उपयोग करके Web3 मूवी स्ट्रीमिंग dApp बनाएं

NextJs、Tailwind、Sia Renterd を使用して Web3 映画ストリーミング dApp を構築する

NextJs, Tailwind 및 Sia Renterd를 사용하여 Web3 영화 스트리밍 dApp 구축

Crie um dApp de streaming de filmes Web3 usando NextJs, Tailwind e Sia Renterd

Создание dApp для потоковой передачи фильмов Web3 с использованием NextJs, Tailwind и Sia Renterd

NextJs, Tailwind ve Sia Renterd kullanarak bir Web3 Film Akışı dApp'i oluşturun

Xây dựng ứng dụng phát trực tuyến phim Web3 bằng NextJs, Tailwind và Sia Renterd

使用 NextJs、Tailwind 和 Sia Renterd 构建 Web3 电影流媒体 dApp

Mastering Modern UI Development with React and Tailwind CSS

Stories, News & Mentions about TAILWIND

Tailwind’s Stories on HackerNoon