At Tailwind, our mission is to make world-class marketing easy for everyone

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

How to Use NextJS, TypeScript, Tailwind, and OneEntry CMS to Build an eCommerce Store 🛒👨‍💻

কিভাবে NextJS, TypeScript, Tailwind, এবং OneEntry CMS একটি ইকমার্স স্টোর তৈরি করতে ব্যবহার করবেন 🛒👨‍💻

So verwenden Sie NextJS, TypeScript, Tailwind und OneEntry CMS zum Aufbau eines E-Commerce-Shops 🛒👨‍💻

Cómo utilizar NextJS, TypeScript, Tailwind y OneEntry CMS para crear una tienda de comercio electrónico 🛒👨‍💻

Comment utiliser NextJS, TypeScript, Tailwind et OneEntry CMS pour créer une boutique de commerce électronique 🛒👨‍💻

ईकॉमर्स स्टोर बनाने के लिए नेक्स्टजेएस, टाइपस्क्रिप्ट, टेलविंड और वनएंट्री सीएमएस का उपयोग कैसे करें 🛒👨‍💻

NextJS、TypeScript、Tailwind、OneEntry CMS を使用して e コマース ストアを構築する方法 🛒👨‍💻

NextJS, TypeScript, Tailwind 및 OneEntry CMS를 사용하여 전자상거래 상점을 구축하는 방법 🛒👨‍💻

Como usar NextJS, TypeScript, Tailwind e OneEntry CMS para construir uma loja de comércio eletrônico 🛒👨‍💻

Как использовать CMS NextJS, TypeScript, Tailwind и OneEntry для создания магазина электронной коммерции 🛒👨‍💻

Bir e-Ticaret Mağazası Oluşturmak için NextJS, TypeScript, Tailwind ve OneEntry CMS Nasıl Kullanılır 🛒👨‍💻

Cách sử dụng NextJS, TypeScript, Tailwind và OneEntry CMS để xây dựng cửa hàng thương mại điện tử 🛒👨‍💻

如何使用 NextJS、TypeScript、Tailwind 和 OneEntry CMS 构建电子商务商店 🛒👨‍💻

When using Tailwind with Astro, you’ll notice that stop working when you use it with Astro Components or Slots. Tailwind’s space utilities 
<div class='space-y-4'>
  <Component client:load />
  <Component client:load />
</div> The reason is simple. I’ve written about the cause in and how to fix it. a previous article You can read that article for more information, but the gist is: Astro components and slots wrap their contents in a div that has display: contents The selector, which Tailwind uses for its space utilities, cannot target the elements within these Astro components and slots * + * A simple fix Fixing this is simple. We have to modify Tailwind’s space utilities with a plugin — so they can dive one level beyond Astro’s components and slots. I’ve created this plugin and added it as part of Splendid UI. You can install Splendid UI like this. npm install splendid-ui Then you can use the plugin in your Tailwind config file like this: module.exports = {
  plugins: [require('splendid-ui/tailwind/plugins/astro-space.cjs')],
} (I know the path looks long and complicated right now. It's something I'll simplify in the future as Splendid UI becomes more mature. For now, enjoy something that works! 🙃). That’s it! Further Reading Splendid UI Astro Space Utility documentation . Feel free to visit that if you want to have these articles delivered to your email first-hand whenever they're released! 🙂. By the way, this article was originally written on my blog

Using Splendid AI — A Tailwind Utility for Astro

In this blog post, I will guide you through deploying an Amazon Clone application on Aptible, showcasing how this platform can simplify and secure the process. I'll cover essential steps, from creating an Aptible account to provisioning a PostgreSQL database, setting up the backend and frontend applications, configuring environment variables, and deploying your applications. Following this comprehensive guide, developers can gain valuable experience deploying web applications on Aptible, a secure and scalable cloud infrastructure platform. The provided instructions and code snippets will simplify the deployment process and help you understand how to harness cloud infrastructure effectively. Features of the Amazon Clone Built using Next.js Styled with Tailwind CSS Backend generated using Amplication State Management with Zustand Typescript for type safety Login Signup using JWT Tokens API calls using Axios Recharts for charts Next UI for exceptional prebuilt components React Pro Sidebar for a prebuilt excellent sidebar. Admin Panel Table Pagination Functionalities of the Amazon Clone Categories CRUD (Create/Read/Update/Delete) Products CRUD (Create/Read/Update/Delete) Order Management Dashboard for Admin Admin Login User Login & Signup User view products User search products The user adds products to the cart User place order And many more features that you can watch from the video below This blog post is a part of my YouTube video. Check out the fantastic video below: https://www.youtube.com/watch?v=JVVJcFGV5p4&embedable=true Introducing Aptible: Simplify and Secure Your Application Deployment Before diving into the details of deploying your Amazon Clone application on Aptible, let's take a moment to introduce Aptible and understand why it's an excellent choice for hosting your web applications. Aptible is a cloud platform designed to simplify and streamline the Deployment and management of web applications, particularly for developers and teams prioritising security and compliance. With Aptible, you can focus on building and scaling your applications while leaving the complexities of infrastructure, security, and compliance to the platform. One of Aptible's standout features is its commitment to security. It provides robust security controls and compliance certifications, making it an ideal choice for applications that handle sensitive data or need to meet regulatory requirements. Aptible takes care of security updates, data encryption, and access controls, allowing you to focus on your application code. Now, let's get started. Step 1: Create a new Aptible Account. Head to Aptible and click the login button to create a new account and sign up. After signup, you will be redirected to the Aptible Environments page. Step 2: Choose Environment Now, you will see your created environments on this page. What are Environments? Environments live within Stacks and provide logical isolation of resources. Environments on the same Stack share networks and underlying hosts. Now, choose your environment and click on it. This is your environment screen. From here, you can manage your apps and databases, see your activity, backups, and many more settings. Step 3: Provision a new PostgreSQL Database We have used the PostgreSQL Database for our Amazon clone, so let's provision a new Database on Aptible. Click on the Database Tab. Now, you will be able to see the Database screen. You can manage and provision new databases from here in your Aptible Environment. Now click on the New Database button to start creating a new database. You can see the UI change to Choose a database selection as soon as you click it. Now, we need to select a database. Click on the database selection dropdown. It will show you all the supported databases by Aptible. Currently, Aptible supports the following Database types: CouchDB PostgreSQL MongoDB Redis Elasticsearch InfluxDB MySQL SFTP RabbitMQ You can check their supported database page to see if they have added more databases. Now, from the list of databases, select PostgreSQL 14. You can see a field as a database handle when you select it. You can name the database of your choice using this field. We are going to name it. . amazon-db Now click on the button. Save changes Now, Aptible will start provisioning your database. Wait for it to complete. While the database is being provisioned, let's move on to the next step, as this will run in the background and be completed in a few minutes. Step 4: Setup Amazon Clone backend on Aptible Now, let's deploy our backend app on Aptible. Head over to the tab and click on . Apps New App Now, you will see the new app creation window. In this window, you need to provide the name of your app. We are going to name it . amazon-backend Now click on the . Create App button Now, Aptible will start creating your app inside the selected environment. Now, you will need to paste your SSH key in this step. If you want to generate a new SSH key or want to learn how Aptible uses your key, visit . Aptible SSH Docs After pasting your SSH key, click on . This will store your SSH key in Aptible so that you don't have to repeat the process the next time you create an app in Aptible. Save key Now we need to push our code to Aptible's git repo. For this step, we would be required to create a inside the root of our server code. Dockerfile You need to copy the following snippet inside the Dockerfile # Development Dockerfile
# This Dockerfile is intended for development use and includes development dependencies and tools.

# Use a Node.js base image with development tools
FROM node:16.0.0 AS development

# Create a directory where the application will be built
WORKDIR /app

# Copy over the dependency manifests, both the package.json
# and the package-lock.json are copied over
COPY package*.json ./

# Install packages and their dependencies
RUN npm install


# Copy over the Prisma schema
COPY prisma/schema.prisma ./prisma/

# Generate the Prisma client based on the schema
RUN npm run prisma:generate

# Copy over the code base
COPY . .

RUN npx prisma db push
# Create the bundle of the application
RUN npm run build

# Expose a specific port on the Docker container for development purposes
ENV PORT=3000
EXPOSE ${PORT}

# Start the development server using the previously built application
CMD ["npm", "start"] Now open up your terminal and write the following steps: Step 1: Create a git repo git init Step 2: Stage all files git add . Step 3: Commit the changes git commit -m "Initial Commit for backend code. After you have committed your changes, you need to copy the Aptible remote url and add it to your repo. git remote add aptible git@beta.aptible.com:youtube-a32/amazon-backend.git After this step, we must push the code to the Aptible's scan branch. Copy the scan command from Aptible and paste it into your terminal. git push aptible main:aptible-scan Now, this will push our code to Aptible's git repository. Now, in Aptible, it will show you this screen. We can configure our environment variables and DB for the app from here. Let's select a DB. Click on the button. Connect Existing Database Now select the that we created in the previous step and name the environment variable as . amazon-db db_url Now click on the button to start the deployment process. Save and Deploy This will start the deployment process. This process may take a certain time. Wait for it to complete. Now, our app has been deployed successfully. Now, we need to run the docker command. Select the cmd and click on the button. Create Endpoint Now, Aptible will start provisioning your endpoint. Our endpoint was successfully provisioned. Now, let's head over to the endpoint. And you can see that we have successfully deployed our Node server to Aptible. Now, let's do the same for our Next app. Step 5: Deploy Amazon Clone Frontend to Aptible Deploying the front end is quite simple. We will follow all the previous steps and deploy our app to Aptible. You need to replace the file in your next app with the code below. next.config.js /** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  env: {
    NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME: "dctahvizk",
    NEXT_PUBLIC_API:"app-61711.on-aptible.com"
  },
  images: {
    domains: ["res.cloudinary.com"],
  },
  // typescript: {
  //   ignoreBuildErrors: true,
  // },
};

module.exports = nextConfig; Here, we have added the environment variable. NEXT_PUBLIC_API Make sure that you replace it with your endpoint. Now, create a new Aptible app and name it . amazon-next-app Before moving forward, let's add the for your next app. Dockerfile # Use an official Node.js runtime as the base image
FROM node:18

# Set the working directory inside the container
WORKDIR /app

# Copy package.json and package-lock.json (if available)
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of your app's source code
COPY . .

# Build the production version of the app
RUN npm run build

# Expose the port your Next.js app will run on
EXPOSE 3000

# Start your Next.js app
CMD ["npm", "start"] Create the at the root level of your app and paste this code. Dockerfile Now open up your terminal and write the following steps: Step 1: Create a git repo git init Step 2: Stage all files git add . Step 3: Commit the changes git commit -m "Initial Commit for frontend code. After you have committed your changes, you need to copy the Aptible remote url and add it to your repo. git remote add aptible git@beta.aptible.com:youtube-a32/amazon-next-app.git After this step, we must push the code to the Aptible's scan branch. Copy the scan command from Aptible and paste it into your terminal. git push aptible main:aptible-scan Our code was pushed to Aptible. Now, let's deploy it. Click on the button. Save & Deploy Our Deployment was successful. Now, let's run the docker cmd and provision an endpoint. Now, our endpoint was successfully provisioned. Open the endpoint in your browser. And you can see that our Next app was successfully deployed on Aptible. Conclusion In conclusion, this blog post has provided a comprehensive guide on deploying an Amazon Clone application on the Aptible platform. We covered essential steps such as creating an Aptible account, provisioning a PostgreSQL database, setting up the backend and frontend applications, configuring environment variables, and deploying the applications. By following this guide, developers can gain valuable experience in deploying web applications on Aptible, a secure and scalable cloud infrastructure platform. The provided instructions and code snippets simplify the deployment process and help developers understand how to leverage cloud infrastructure effectively. Aptible offers a robust environment for hosting web applications, making it an excellent choice for developers looking to deploy and manage their projects securely. This tutorial equips developers with the knowledge and practical skills needed to take advantage of Aptible's capabilities for deploying web applications.

Deploying a Full Stack Amazon Clone with Next.js, Tailwind CSS, Zustand, and Nest.js on Aptible

In this blog post you'll learn how to create a Full Stack Amazon Clone using Amplication. Features of the Amazon Clone Built using Next.js Styled with Tailwind CSS Backend generated using Amplication State Management with Zustand Typescript for type safety Login Signup using JWT Tokens API Call's using Axios Recharts for charts Next UI for amazing prebuilt components React Pro Sidebar for prebuilt amazing sidebar. Admin Panel Table Pagination Functionalites of the Amazon Clone Categories CRUD (Create/Read/Update/Delete) Products CRUD (Create/Read/Update/Delete) Order Management Dashbord for Admin Admin Login User Login & Signup User view products User search products User add products to cart User place order And many more features that you can watch it from the video below This blog post is a part of my Youtube video. Check out the amazing video. https://www.youtube.com/watch?v=JVVJcFGV5p4&embedable=true Unleashing Amplication's Potential: Streamlining Software Development Efforts Amplication, is a powerful open-source backend engineered to streamline and accelerate web application creation. It offers a user-friendly interface and a comprehensive feature set, making it a valuable resource for developers and organizations aiming to swiftly develop robust, scalable applications while conserving time and resources. development tool At its core, Amplication revolves around the concept of a low-code backend development environment. This innovative approach allows developers to construct applications by configuring and connecting pre-built building blocks, eliminating the need for extensive manual coding. Consequently, development teams can direct their efforts towards crafting business logic and delivering a polished final product with greater efficiency. Step 1: Create a new GitHub repository Amplication connects to our GitHub repo and pushes the code to a branch and creates a pull request. Step 2: Head over to the Amplication website and click on the Start Now button Step 3: Continue with Github Account In this step, click on the continue with Github button to start the connecting Amplication with your Github account. Step 4: Create your first service Now you need to create a service for Amplication, which in turn generates your backend code. Give it a meaningful name. We are going to name it Amazon-backend and hit continue. Step 5: Connect with Github and Select Repository Now you need to connect with Git. There are various options available, but we are going to use Github as our git provider. After you connect with GitHub you need to select a repository. Select the amazon-clone repo. The repo would be selected now. Now hit continue. Step 6: Selecting GraphQL / RestAPI & Swagger UI / Admin UI In this step, you can enable the options for support of the GraphQL API, the REST API & Swagger UI and the Admin UI provided by Amplication. We are going to enable all the options here. Though we will not be using the GraphQL API for the app for the purposes of this demo. We are going to use the REST API throughout the Amazon clone. Also, we will be using Swagger to test out the APIs. Step 7: Selecting the type of backend structure generated by Amplication. Amplication provides two types of structure for the generated code. Polyrepo
If you are using a polyrepo, Amplication will push the code to the root of the repo in separate folders for the server and the admin-ui. Monorepo If you are using a monorepo, you can select the folder where you want to save the code of the service. “apps”, “packages”, “ee/packages” are all valid. We are going to use the Polyrepo option for this project. Step 8: Select the database. Amplication provides three types of databases at the moment. PostgreSQL MongoDB MySQL Amplication generates the service with all the required configuration and code to start working with a DB. You can easily change the type of the DB later in the plugins page. For this Amazon Clone, we are going to use the PostgreSQL DB. Now hit continue. Step 9: Selecting a Template for your Project Amplication provides two options for your entities. Empty
Manually define your own entities and fields Use a Template
Pre-defined set of entities and fields Address, Orders, User You can start from scratch or select a demo template. We are going to select the empty option here. Hit continue. Step 10: Selecting Auth Services Amplication provides an built auth module that pre-generates code for your authorization and authentication. For this, Amplication provides two options Include Auth Module
Generate the code needed for authentication and authorization Skip Authentication
Do not include code for authentication For our Amazon clone, we are going to use the auth module provided by Amplication, so we are going to select the Include Auth Module Option. Now hit continue All the initial setup is done and now Amplication will generate the code. Wait for it to generate. This may take a minute or two. You will see the success page. You have successfully set up your Amplication app. Now click on the "create entities” option to create entities. Entities are like tables in DB. Now, there is a predefined entity here, which is for users in your application. Setting up Amplication Entities We will be using four entities in our Amazon Clone Manages all users with their details. user: This will store all products created by admin. products: This will store all the categories of the products. category: After the user buys a product they can add reviews for the product. This entity will store the reviews of the products. reviews: This will store the orders of the products. orders: Setup Users The user entity is already created. Click on it to view the fields of the user. field isAdmin Now we want to add a new field here named . isAdmin Click on the add field on the left sidebar. Now type the name of the entity and press the plus icon beside it, which will create the entity. After you click on it, the field will be created, and you can configure it from the right-side field settings. This field will let us know if the current logged-in user is an admin. Its datatype is . boolean Now click back, and the setup for the user entity is complete. Products entity This entity will store all products with their details Now, let's create a new entity for products. Click on the Add Entity button. This will open up a modal. Type the name of the entity as and press create entity. products This will create a new entity. Now, let's add all the required fields. field title Write title as the name and click on + right beside it. You can see that the new field is created, and there are various options to configure. We are going to mark this field as . required Also, we will select the Data Type as from the dropdown. Single Line Text Amplication provides various Data Types according to your needs and takes care of the constraints on your code as needed according to the data type. Now amplication auto-saves everything after each change, so your selections are already selected field description Do the same process for description, but for the datatype, we will change to because we will have multiple descriptions for the product. Json field salePrice This will store the orignal price of the product. The datatype of this field will be Decimal Number field discountPrice This will store the discounted price of the product. We will have the datatype of this field as . Decimal Number field colors This will store the colors of the products. We will be able to store multiple colors, so we will be using the datatype for this field. Json field variants This field will store all the different variants of the product. For example, the size of clothes, storage of digital devices, etc. We will be able to store multiple values for variants so we will use the datatype for this field as well. Json field images We will upload the images to cloudinary. Cloudinary will return us the URL's of the uploaded images. We will have an array of images; we will be using the datatype for the field as well. Json images That's all for the products entity. Category entity This entity will store the category of all the products. field name This field will store the name of the category. Datatype for this field will be . Single Line Text field products This field will store all the products associated with the category. We will name this field as . products This field's datatype will be . Relation to Entity In the related entity dropdown select . products And for relation selct option. One 'category' can be related to many 'products' This means that one category can have more than one products. That's all for the category entity. Reviews entity This will store the reviews of the products. field rating This field will store the number of ratings the review has. The datatype for the field would be . rating Whole Number field description This field will store the text of the review. The datatype of the field will be . description Multi Line Text field products This field will store all the products associated with the review. We will name this field as . products This field's datatype will be . Relation to Entity In the related entity dropdown, select . products And for relation select option. One 'reviews' can be related to one 'products' This means that one product can have more than one review. field user This field will store the user associated with the review. Let's name this field as . user This field's datatype will be . Relation to Entity In the related entity dropdown select . users And for relation select option. One 'reviews' can be related to one 'user' This means that one review can only have one user associated with it. That's all for the reviews entity. orders entity This will store all orders that have been created by the user. field user This field will store the user associated with theorder. Let's name this field as . user This field's datatype will be . Relation to Entity In the related entity dropdown select . users And for relation select option. One 'orders' can be related to one 'user' This means that one order can only have one user associated with it. field products This field will store all the products associated with the order. We will name this field as . products This field's datatype will be . Relation to Entity In the related entity dropdown, select . products And for relation select option. One 'order' can be related to many 'products' This means that one product can have more than one review. field price This field will store the total amount of all the products in the order. The datatype for the field would be . price Decimal Number field status This field will store the status of the order. The datatype for this field would be . Json field paymentIntent This field will store the payment data by payment gateway. The datatype for this field would be . Single Line Text field paymentStatus This field will let us know the status of the payment. The datatype for this field would be . Boolean That's all for the orders entity. Now we have created all the entities that are required and we can build our app and push the code over to GitHub. Build and publish the code to GitHub You can see that we have some pending changes in the right sidebar. We need to push these changes to GitHub to integrate it with our app. Click on the button. Commit Changes & build With this Amplication will start building your code. As soon as the build is successful, the code will be pushed over to Github. Now head over to your GitHub repository. Now click on the Pull requests. Click on the pending pull request that is generated by the Amplication bot. Now you will see the request page. You can either check the code or merge the pull request to merge it with the main source code. Now we have successfully generated the backend code with Amplication. Setup Local App Now we need to set up the app on our local machine. For that, clone the repository or pull your source code from git. Now to set up the app, we need to install the dependencies. Let's create a file in the root of your app and paste the following code in it. package.json {
  "name": "amazon-clone",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start:admin": "npm --prefix admin-ui start",
    "start:backend": "npm --prefix server start",
    "postinstall": "npm i --prefix admin-ui && npm i --prefix server"
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    "npm-run-all": "^4.1.5"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/koolkishan/nextjs-amazon-clone.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/koolkishan/nextjs-amazon-clone/issues"
  },
  "homepage": "https://github.com/koolkishan/nextjs-amazon-clone#readme",
  "dependencies": {
    "qs": "^6.11.2"
  }
} Now you need to run . npm install This will install the root dependencies. After this you need to run the script to install the frontend, backend and the admin-ui dependencies. npm run postinstall After the process is completed, your app is successfully setup with the backend code generated with Amplication. Now to start the app you can run . npm run start Amplication REST APIs with Swagger If you want to check the APIs generated by Amplication, head over to . http://localhost:3000/api This will open the Swagger UI with all the API's. You can test out APIs here. Conclusion This blog post has provided a comprehensive guide on how to create a full-stack Amazon Clone using Amplication, a powerful open-source backend development tool. The Amazon Clone features a range of functionalities and technologies, including Next.js, Tailwind CSS, Zustand for state management, TypeScript for type safety, JWT token-based authentication, Axios for API calls, Recharts for charts, Next UI for prebuilt components, and React Pro Sidebar for a sidebar. It also includes an Admin Panel and Table Pagination. Amplication's potential in streamlining software development efforts has been highlighted. It offers a low-code backend development environment that allows developers to build applications by configuring and connecting pre-built building blocks, saving time and resources. The step-by-step guide covers setting up a GitHub repository, connecting Amplication with GitHub, creating a service, selecting the database, and defining entities for the Amazon Clone. It explains how to configure various fields for entities like users, products, categories, reviews, and orders. The blog also outlines the process of building and publishing the code to GitHub and setting up the local app for development. It provides a package.json file for dependency management and offers instructions for starting the app. Finally, the blog mentions how you can explore and test the REST APIs generated by Amplication using Swagger UI. Overall, this comprehensive guide empowers developers to create a feature-rich Amazon Clone efficiently using Amplication, demonstrating the tool's capabilities in simplifying backend development for web applications.

Building a Full Stack Amazon Clone with Next.js, Tailwind CSS, Zustand, Amplication and More. 

How are you, hacker?
🪐 has got you covered with fresh content from our trending stories of the day! Set email preference . Want to know what's trending right now?: The Techbeat by HackerNoon here Decoding the Future: 50 AI Statistics Highlighting Marketing's Transformation In 2023 By [ 5 Min read ]
Dive into 50 pivotal AI marketing stats. Essential for startups, B2B SaaS & SMEs, these stats illuminates AI marketing strategies for robust growth. Learn more: @darragh Read More. Making TypeScript Truly "Strongly Typed" By [ 12 Min read ]
How to Control the "Any" Type to Achieve Ultimate Type Safety With TypeScript. @nodge Read More. Understanding Dynamic Programming So You Can Use It Effectively By [ 11 Min read ]
I’ll discuss Dynamic Programming (DP) and how to use previous computation experience effectively. I hope you will find it interesting. @indrivetech Read More. How GPT Pilot Codes 95% of Your App By [ 9 Min read ]
GPT Pilot is a dev tool that writes 95% of coding tasks. @zvone187 Read More. A List of Projects Software Engineers Should Undertake to Learn More About LLMs By [ 4 Min read ]
Software engineers with strong programming skills can play a critical role in driving LLMs' growth and innovation. @cheparukhin Read More. Underrated Founder Traits: The Unspoken Variables in Startup Success By [ 5 Min read ]
In the venture capital ecosystem, there's a persistent allure for formulas, models, and hard data that investors routinely rely upon... @vvmrk Read More. Train Your Own ChatGPT-like LLM with FlanT5 and Replicate By [ 10 Min read ]
We train an open-source LLM to distinguish between William Shakespeare and Anton Chekhov. @shanglun Read More. Probing Realities: Advancing AR/VR Experiences with Spatial Analytics By [ 6 Min read ]
Amidst the hype surrounding Vision Pro's recent announcement, curiosity regarding AR/VR development has significantly increased. @jasmineroberts Read More. How GPT-4 Built a New Multimodal Model By [ 2 Min read ]
LLaVA: Bridging the Gap Between Visual and Language AI with GPT-4 @whatsai Read More. Why 'Jobs-to-be-Done' Doesn't Work and What You Should be Doing Instead By [ 4 Min read ]
In this article, I'll explain why I believe nearly no one understands or applies the jobs-to-be-done theory correctly. @vvmrk Read More. Github's Copilot Committed Software Piracy at an Unprecedented Level By [ 4 Min read ]
Contrary to and in violation of the Licenses, code reproduced by Copilot never includes attributions to the underlying authors. @legalpdf Read More. Quid Pro Quo Made Profitable: Review Our App & Win $1000 By [ 3 Min read ]
The HackerNoon App is here - and with it, the HackerNoon's Review Contest. Leave a review on the app store, and you'll be entered into a draw to win $1000! @product Read More. Tailwindcss? I'll Pass By [ 6 Min read ]
Tailwindcss is breaking the frontier of CSS libraries and frameworks. Bootstrap is lagging behind and Vanilla CSS is stationary. Is Tailwind CSS worth it? @sipping Read More. Next.js and SignalR: Effortless Socket Integration and Troubleshooting By [ 8 Min read ]
Next.js and SignalR integration. Next.js and SignalR troubleshooting @chilledcowfan Read More. How I Used Python and Folium to Visualize My Outdoor Activities By [ 14 Min read ]
Embark on an expedition of exploration and mapping! Learn how to breathe life into your GPX files and create interactive maps using Folium. @lukaskrimphove Read More. Diablo 4 is Dead and Blizzard Never Had a Plan By [ 4 Min read ]
Diablo 4 has fundamental problems that may cripple the future of the game. Find out where Blizzard went wrong here. @playerauctions Read More. AI and the Future of Space Exploration By [ 9 Min read ]
As AI continues to evolve, we can expect to see even more innovative and groundbreaking applications of this technology in the years to come. @induction Read More. Google Doesn’t Want Your Content to Succeed By [ 4 Min read ]
Google’s SERPs are already dominated by sponsored content. With the integration of AI features, what will happen to organic content? It will likely not succeed. @deepikapundora Read More. Fine-Tuning for GPT-3.5 Turbo: AI Game Changer By [ 3 Min read ]
OpenAI, the powerhouse behind some of the world's most advanced AI models, has announced a major upgrade for its GPT-3.5 Turbo @sergey-baloyan Read More. How Voicemy.ai Is Exploring AI’s Limits With Voice Cloning By [ 2 Min read ]
Voicemy.ai, a musical platform powered by AI, has unveiled its solution for making celebrities sing. 🧑‍💻 What happened in your world this week?It's been said that , , . Feeling stuck? We got you covered ⬇️⬇️⬇️ We hope you enjoy this worth of free reading material. Feel free to forward this email to a nerdy friend who'll love you for it.See you on Planet Internet! With love,
The Hacker Noon Team ✌️ @chainwire Read More. writing can help consolidate technical knowledge establish credibility and contribute to emerging community standards ANSWER THESE GREATEST INTERVIEW QUESTIONS OF ALL TIME

The TechBeat: Tailwindcss? Ill Pass (9/13/2023)

Build a Decentralized Voting Dapp with Next.js, TypeScript, Tailwind CSS, and CometChat

The Noonification: Tailwindcss? Ill Pass (8/27/2023)

The Noonification: Tailwindcss? Ill Pass (8/18/2023)

Recently, I used Tailwindcss in a project and you know what? It was an eye-opening experience, to say the least. Some of you might be wondering: what is Tailwindcss? Tailwind CSS stands out as the fastest-growing library to date. It has swiftly become an essential tool for front-end developers. Many developers on the front end are utilizing it in large-scale projects, encountering minimal issues. Its enhancements to website and web-app development and design are undeniably remarkable. CSS So, what’s the problem? Why does the title say '“ ”? Tailwindcss? No Thanks This title suggests that there could be instances when Tailwind CSS might not be the optimal choice for your projects, despite its excellence. Why could this be? There is an answer. Yet, before we delve into the explanation, let's establish the groundwork for this examination of the technology. What’s with all the CSSs? Before we can get into and its development intricacies we must satisfy a few prerequisites. Tailwindcss What is CSS? CSS stands for Cascading Style Sheets. The best definition for CSS in my opinion comes from techterms.com “CSS is a style sheet language used for formatting content in HTML webpages. CSS style sheets can define the appearance and formatting of text, tables, and other elements separately from the content itself. Styles may be found within a web page’s HTML file or in a separate document referenced by multiple webpages”. In not so many words: CSS is s styling language. You use CSS on elements to make your webpage or web app look excellent. HTML What is Tailwindcss? From the words of the themselves, Tailwindcss is “ ”. Tailwindcss team A utility-first CSS framework packed with classes like flex , pt-4 , text-center and rotate-90 that can be composed to build any design, directly in your markup This essentially means tailwind CSS takes original CSS procedures and operations and then makes them simpler to do and implement. We've already discussed the basics of CSS and Tailwind CSS. Now, let's delve deeper and examine how Tailwind CSS operates in practice, along with its corresponding CSS counterparts. This exploration will eventually lead us to the conclusion I reached during my project involving Tailwind CSS. My conclusion is that Tailwind CSS is best suited for larger and more complex front-end projects. However, the default choice for most situations should still be "vanilla" CSS. In other words, using CSS in its purest form is generally more advantageous for most individuals and scenarios compared to any additional library, be it Tailwind CSS or others. Differences between CSS and Tailwindcss Let’s compare by making a vanilla CSS equivalent and then a Tailwindcss equivalent. What does Tailwindcss look like? Let’s break down what’s going on in the above text. It is an excerpt and we are constructing a button. HTML 5 To construct the button we set it up through “ ” - essentially small containers to input things for changing our website or web app. We give each div its own “ ” so we are able to reference that particular element later on in our separate CSS file. Although, you can also give divs their own “ ”. You can do “ ” CSS changes, which means you can put CSS directly into the HTML file but most tend to avoid that for the sake of organization. divs class ids in-line In the CSS file, what could our code to edit the button look like? In the above code, we are interacting with the button class in the HTML excerpt.  The way you make your CSS file aware of your HTML classes is with a dot at the beginning of the class name itself. Below that, in order, we align the button to the center of the div with “ ”. Below  align-item is the “ ” which defines how far the “ ” will stretch to and not stretch over. The “ ” is the thickness of the sides of the button and the border radius is how curved the edges are. All we’ve just mentioned contributes to developing the button style. As we can see, the original CSS styles seem simple enough. How would Tailwindcss handle the same case? align-items background clip background-color border Wait, what? Did we just put CSS-looking code into an HTML file? yes, we did. What you are looking at is the equivalent of the previous code examples in Tailwindcss. This is actually one of the more unique attributes of Tailwindcss. When using Tailwindcss you do not put your separate CSS code into a different file. All your Tailwindcss code goes directly into your HTML file. As we stated before, developers traditionally avoid CSS coding. With Tailwindcss in-line coding is no longer really an option, it is almost necessary. The Tailwindcss is fully implemented through . in-line class identification Now, what does the code above do? it does exactly what the original CSS code does, albeit slightly differently. Let’s take another look at regular CSS vs the Tailwindcss counterpart. In the above image, we are in an document importing a picture of chocolate under the class “ ”. Let us see what the corresponding CSS looks like. HTML5 card-img The above CSS code is similar to the last one. No need for much in-depth extrapolation. We are defining the chocolate cards’ appearance. Let us now see the much more interesting Tailwindcss variant. The code above is the Tailwindcss equivalent. It is much simpler, and more elegant but requires much more effort to know what everything means and how to position statements. So is that an advantage it has over traditional CSS? The nature of Tailwindcss makes it very messy. All your code, both HTML and CSS, will be in one file and will be long and seemingly crowded. This makes it difficult to develop. What are the main disadvantages of Tailwindcss? Steep learning curve that takes time to get used to. Have to make custom class components. (This could add up to a lot on a long project). Confusing because HTML and styling are mixed What are its ? main advantages Highly customizable Faster development Consistent wording and patterns regardless of what’s being added or edited. We have seen examples of Tailwindcss and now we know the main advantages and disadvantages. But, how popular is it? It has been adopted and proliferated amongst both old and new developers. stated that Tailwindcss had gained 4.5 million weekly downloads as of November 19, 2022. As I am writing this, if you go onto and search for Tailwindcss it has 336 million downloads. Since its release 5 years ago that’s an average of 184,110 downloads per day. An incredulous amount of downloads. Vivian Guillen of tailwindweekly.com npmjs.com Winding down on Tailwind Earlier, at the beginning of this piece, I wrote, “ Why did I write this? and how does it correlate with the title? There may be a time or times when Tailwindcss is not the optimal solution for your projects”. “Tailwindcss? I’ll Pass ”. is popular globally amongst almost all frontend developers, it looks easier to implement than traditional CSS and it offers more customisability than other technologies of its type. Heck, my use of it even inspired this article itself. So why do I still doubt it? . Tailwindcss Because I used it of course Tailwindcss is every bit as good as everyone claims it to be and more. Similarly, it is every bit of bad as people claim it to be as well. The nature of Tailwindcss makes it convoluted to work with on short to midterm projects, the learning curve completely hampers your development, the insistence on making custom components, etc. These all make Tailwindcss unbearable, . Only in the short term! IN THE SHORT TERM This means that Tailwind CSS should be reserved for extensive, intricate projects undertaken by developers and companies. For shorter projects, it's advisable to adhere to conventional CSS. This prevents your CSS skills from weakening and avoids becoming overly reliant on shortcut frameworks like Tailwind CSS. Why should you believe me? I challenged myself to employ Tailwind CSS on a minor project, and it genuinely underscored why it's better suited for substantial, enduring ventures. I'm excited to delve into other CSS frameworks and might even compose articles about them! You can find out if you and we’ll be seeing each other very soon ;) subscribe to me

Tailwindcss? I'll Pass

Tailwindcss? আমি পাশ করব

Rückenwind? Ich werde vorbeigehen

¿Viento de cola? Voy a pasar

Vent arrière ? Je vais passer

टेलविंडसीएसएस? मुझे रहने दो

追い風？私はパスします

순풍? 나는 통과 할 것이다

Tailwindcss? Eu vou passar

Arka rüzgarlar mı? Ben almayayım

Tailwindcss? Tôi sẽ vượt qua

顺风？我会通过

In this blog post, you'll learn how to create a Full Stack Airbnb Clone using Amplication. Features of the Airbnb Clone Built using Next.js Styled with Tailwind CSS Backend generated using Amplication State Management with Zustand Realtime Maps using Mapbox API Login Signup using JWT Tokens API calls using Axios Functionalites of the Airbnb Clone Create Listings View Listings Book Listings Delete Listings Add Listing to Wishlist Remove Listing from Wishlist View booked Listings Search Listings Search Listings using Map View Listings Data on Map This blog post is a part of my Youtube video. Check out the amazing video. https://www.youtube.com/watch?v=nkmPmUpUM6U&embedable=true Unleashing the Power of Amplication: Accelerating Software Development with Ease is an open-source development tool designed to simplify and expedite the process of building web applications. With its user-friendly interface and a wealth of features, Amplication empowers both developers and organizations to create robust and scalable applications quickly, saving valuable time and resources in the process. Amplication The platform is centered around the concept of a low-code development environment, which allows developers to build applications by configuring and connecting pre-built building blocks rather than writing code from scratch. This approach dramatically reduces the amount of manual coding required, enabling teams to focus on creating business logic and delivering a polished end product. Step 1: Fork the starter git repository: Clone this to get starter files for the Airbnb Clone. git repository Step 2: Create an amplication account Head over to and connect your GitHub. amplication login Step 3: Create your first service Now you need to create a service for amplication which in turn generates your backend code. Give it a meaningful name. We are going to name it AirBnb and hit continue. Step 4: Connect with Github and Select Repository Now you need to connect with Git. There are various options available, but we are going to use as our Git provider. Github After you connect with GitHub, you need to select a repository. Select the Airbnb repo. Now hit continue. Step 5: Selecting GraphQL / RestAPI & Swagger UI / Admin UI In this step, you can enable the options for support of the GraphQL API, the REST API & Swagger UI, and the Admin UI provided by Amplication. We are going to enable all the options here. Though we will not be using the GraphQL API for the app, for demo purposes, we are enabling it. We are going to use the REST APIs throughout the AirBnb clone. Also, we will be using Swagger to test out the API's. Step 6: Select the type of backend structure generated by Amplication. Amplication provides two types of structure for the generated code. Polyrepo If you are using a polyrepo, Amplication will push the code to the root of the repo in separate folders for the server and the admin-ui. Monorepo If you are using a monorepo, you can select the folder where you want to save the code of the service. “apps,” “packages,” and “ee/packages” are all valid. We are going to use the Polyrepo option for this project. It will generate two folders at the root of our repository, named server and admin-UI Now hit continue. Step 7: Select the database. Amplication provides three types of databases at the moment. PostgreSQL MongoDB MySQL Amplication generates the service with all the required configuration and code to start working with a DB. You can easily change the type of the DB later on the plugins page. For this AirBnb Clone, we are going to use the PostgreSQL DB. Now hit continue. Step 8: Selecting a Template for Your Project Amplication provides two options for your entities. Empty Manually define your entities and fields. Use a Template Pre-defined set of entities and fields Address, Orders, User. You can start from scratch or select a demo template. We are going to select the empty option here. Hit continue. Step 9: Selecting Auth Services Amplication provides an inbuilt auth module that pre-generates code for your authorization and authentication. For this, Amplication provides two options: Include Auth Module Generate the code needed for authentication and authorization. Skip Authentication Do not include code for authentication. For our AirBnb clone, we are going to use the auth module provided by Amplication, so we are going to select the Include Auth Module Option. Now hit continue All the initial setup is done, and now Amplication will generate the code. Wait for it to generate. This may take a minute or two. After the code is generated, you can see on the following screen that the code has been generated. Now you select the view my code button, and it will redirect you to the GitHub Page. Step 10: Merge the pull request generated by amplication Now after every change in the Amplication service, it will generate a new pull request that needs to be merged in Github with our code. Now on the GitHub Pull Request page, you have to merge the code with the Merge Pull Request button. You can also check the code generated by Amplication by clicking the Files Changed Option. This will show you all the code generated by Amplication. Now head over to the amplication tab and hit continue. You will see the success page. You have successfully set up your Amplication app. Now click on create entities option to create entities. Entities are like tables in DB. Now there is a predefined entity here which is for users in your application. Setting up Amplication Entities We will be using four entities in our AirBnb Clone: Manages all users with their details. user: This will store all entities created by a user. listings: If a user books a listing then it would be stored in this entity. trips: If a user adds a listing into their wishlists then this would be stored in the Wishlists entity. wishlists: Setup Listings Now click on Add Entity button in Top Right Corner On the new Entity Modal screen, type listings as the name of the new entity and hit create entity. Now you will be redirected to the listings entity details page. From here, you can add new fields to your entity or even give granular permissions to the entity according to the roles. Now from here, we need to create some fields that we are going to use for our AirBnb Clone. title Field Click on the add field button. Write the title as the name and click on + right beside it. You can see that the new field is created, and there are various options to configure. We are going to mark this field as . required Also, we will select the Data Type as from the dropdown. Single Line Text Amplication provides various Data Types according to your needs and takes care of the constraints on your code as needed according to the data type. Now amplication auto-saves everything after each change, so your selections are already selected. description Field Do the same process for the description, but for the datatype, we will change it to . Multi Line Text locationType Field This field will store the type of location of the listing, whether it is a house, flat, bungalow, etc. Do the same process as we followed for the title field. placeType Field This field will store the details like if there is a full room in this place, if this place is shared, etc. Do the same process as we followed for the title field. price Field This field will store the price of the listing. For the datatype, we will use the type. Whole Number The minimum and maximum values would be set by default. We do not need to change it. mapData Field This field will store the map coordinates for the Mapbox to load the specific location with the accurate marker. For this field, we will select the datatype as the type because we will have JSON data inside of it. Json locationData Field This field will store the location Data like the pincode, address, city, etc. This will be a data type. Json placeSpace Field This will store the total number of rooms and total guests the place can have. This will be a data type. Json photos Field This will store the links to the photos for the listings. This will be a data type. Json listingCreatedBy field This field will store the data of the user that created this listing. This would be related to the User entity. Select the data type as . Relation to entiity In the Relation Entity Dropdown Select the Entity. User And select the option. This means that one user can create many listings. One 'listings' can be related to one 'listingCreatedBy' That's it. With this, we have created our listings Entity. Setup Wishlists This entity will store the wishlists of the user. user field This will store which user has added the listing. The data type will be with the user, with the option toggled. Relation to Entity One 'wishlists' can be related to one 'user' listing Field This will store which listing has been added by the user. The data type will be with the user, with the option toggled. Relation to Entity One 'wishlists' can be related to one 'listing' That's it for the wishlists entity. Setup Trips This will store the trips that have been booked by the user. We will follow the same procedure for the trips as we did for the wishlists with the same field names and the same relations. And that's all for the Trips entity. Now we have created all the entities that are required, and we can build our app and push the code over to GitHub. Build and publish the code to GitHub You can see that we have some pending changes in the right sidebar. We need to push these changes to GitHub to integrate it with our app. Click on the button. Commit Changes & build With this Amplication will start building your code. As soon as the build is successful, the code will be pushed over to GitHub. Now head over to your GitHub repository. Now click on the Pull requests. Click on the pending pull request that is generated by the Amplication bot. Now you will see the request page. You can either check the code or merge the pull request to merge it with the main source code. Now we have successfully generated the backend code with Amplication. Setup Local App Now we need to set up the app on our local machine. For that, clone the repository or pull your source code from git. Now to set up the app, we need to install the dependencies. For this, there's already a pacakge.json file created in the root of the directory. You need to run . npm install This will install the root dependencies. After this, you need to run the script to install the frontend, backend, and admin-UI dependencies. npm run postinstall After the process is completed, your app is successfully setup with the backend code generated with Amplication. Now to start the app, you can run . npm run start Amplication REST API's with Swagger If you want to check the APIs generated by Amplication, head over to . http://localhost:3000/api This will open the Swagger UI with all the APIs. You can test out APIs here. But wait, there's something more, Amplication introduces a groundbreaking feature: Upload Prisma Schema. If you find yourself in the midst of the development phase and wish to seamlessly transition to Amplication's services, this powerful tool will be a game-changer. Imagine having the ability to effortlessly import your Prisma schema into Amplication, enabling the automatic generation of entities and relationships required for your application. This simplifies the migration process, saving you time and effort while ensuring a smooth transition to Amplication's services. With Amplication's Upload Prisma Schema feature, you can take your development project to the next level, leveraging the platform's robust capabilities to accelerate your app's progress. The integration of your existing Prisma schema will pave the way for a more efficient and productive development experience. Here's what the process looks like, This feature is still in beta mode and will be available to end users shortly. Conclusion This blog post has taken you through the process of creating a Full Stack Airbnb Clone using Amplication, a powerful open-source development tool. With Amplication's low-code development environment, developers can build web applications by configuring and connecting pre-built building blocks, reducing the amount of manual coding required. The post covered the various features and functionalities of the Airbnb Clone, including real-time maps, JWT-based authentication, API calls using Axios, and more. The step-by-step guide walked you through setting up the project using Amplication, creating entities for listings, wishlists, and trips, and how to push the code to GitHub for integration. Additionally, it demonstrated how to test the REST APIs generated by Amplication using Swagger UI. By leveraging Amplication's capabilities, developers and organizations can accelerate software development, save valuable time and resources, and deliver robust and scalable applications. Whether you're a seasoned developer or just starting, Amplication provides a user-friendly platform for building impressive web applications with ease. So, go ahead and unleash the power of Amplication in your next development project! Happy coding! Also published . here

Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More

Buttons. Ahhh boring buttons. The most basic element we love to neglect. But buttons don't have to be boring. Here are 7 spicy button designs using . Tailwind CSS 1) Icon Adding an icon to a button is a nice cherry on top of it's design and can add some context for its intended action. 2) Standard Standard button to draw a user’s attention to action. Great for primary actions. 3) Outlined Draws attention but not to much. Great for secondary actions. 4) Dark & Square Square buttons should only be used if the rest of your design is lacking border radiuses. Usually meant for a more business-like theme. 5) Fully Rounded A fully rounded button is meant for more light-hearted designs. Again, if your using rounded buttons, keep the rest of your design consistent with it. 6) Raised Raised buttons give depth to the page and make the element appear closer to the user, giving it a sense of purpose. 7) Smooth Smooth buttons are great for secondary actions. Their designs don't draw as much attention as a solid primary button. Also published here. Beautiful Tailwind CSS Landing Pages If you enjoyed this, consider checking out my new project - Tailwind Sites There you will find Expertly crafted Tailwind CSS landing pages. Get a head start on your next big idea. Beautifully designed. Expertly coded.

7 Fun Tailwind CSS Button Designs to Improve Your Workflow

Hi there, I am going to show you an exciting new way to authenticate your users using facial recognition by . faceIO What is FaceIO This is a facial authentication framework that can easily be integrated into any website or web app using a simple JavaScript snippet. Why use facial integration and faceIO? Since the number of websites asking for passwords is constantly growing and the complexity of passwords needs to increase beyond that which the human brain can remember, facial recognition authentication is able to step in and provide a method of authentication that is simple and secure. In cases where the website moderators want to substantially reduce the ability of a user to open multiple accounts or where the user identity needs to be verified, for example when using financial service provider’s websites, facial recognition is able to provide authentication that is incomparable to other traditional forms of authentication. The cost of authentication is reduced compared to OTP authentication (sending shortcodes to clients’ phone numbers). Now let us get to the heart of the matter and integrate faceIO into a Next.js login/signup form and you will experience the simplicity of faceIO. First, we begin by initializing Next.js in a new folder. I will use yarn: yarn create next-app faceionextjsform Let us cd into the folder then add Tailwind CSS to the project cd faceionextjsform

yarn add -D tailwindcss postcss autoprefixer Create tailwind CSS configuration files that are and by this yarn command. tailwind.config.js postcss.config.js yarn tailwindcss init -p Open tailwind.config.js and replace the contents with this module.exports = {
  content: [
    // add this lines
    "./pages/**/*.{js,ts,jsx,tsx}",
   
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} Update , you may delete any other files. ./styles/globals.css /* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities; Go to and delete all the HTML and replace it with the following: pages/index.js <div className='bg-green-300 text-center text-white h-screen'>
      <Head>
        <title>face.IO login/signup form</title>
        <meta name='description' content='a face.IO login form' />
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <main>
        <h1 className='text-xl font-bold'>home</h1>
      </main>
</div> Before we run our application, add a new file to the pages folder ( ). This is used to override the default because we want to add a custom script tag to our site. This script tag will enable us to integrate the faceIO into our project by adding their CDN to the HTML. _document.js pages/_document.js Document If you want to know more you can visit the . faceIO integration guide The contents of will be as follows: _document.js import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }
render() {
    return (
      <Html>
        <Head></Head>
        <body>
          //note this script tag
          <script src='https://cdn.faceio.net/fio.js'></script>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
export default MyDocument; After you run yarn dev  your application should look like this picture above. Inspect your site and confirm whether the faceIO CDN script is located inside the body tag. Create a new root folder components and add a file ( ). SignUpForm.js components/SignUpForm.js Since I want to summarize this as much as possible I have taken the liberty of creating a form feel free to copy the code. import React from 'react';
const SignUpForm = () => {
  return (
    <section className='h-full gradient-form bg-gray-200 md:h-screen'>
      <div className='container py-12 px-6 h-full'>
        <div className=' flex justify-center items-center flex-wrap h-full g-6 text-gray-800'>
          <div className=''>
            <div className='block bg-white shadow-lg rounded-lg'>
              <div className='lg:flex lg:flex-wrap g-0'>
                <div className='px-4 md:px-0'>
                  <div className='md:p-12 md:mx-6'>
                    <div className='text-center'>
                      <h4 className='text-xl font-semibold mt-1 mb-12 pb-1'>
                        Face Authentication by FaceIO
                      </h4>
                    </div>
                    <form>
                      <p className='mb-4'>
                        Please Sign Up if you do not have an account
                      </p>
                      <div className='mb-4'>
                        <input
                          type='email'
                          className='form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none'
                          placeholder='Your Email'
                          name='userEmail'
                        />
                      </div>
                      <div className='mb-4'>
                        <input
                          type='password'
                          className='form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none'
                          placeholder='Password'
                          name='pin'
                        />
                      </div>
                      <div className='text-center pt-1 mb-12 pb-1'>
                        <button
                          className='bg-green inline-block px-6 py-2.5 text-black font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:shadow-lg focus:outline-none focus:ring-0 active:shadow-lg transition duration-150 ease-in-out w-full mb-3'
                          type='button'
                          onClick={handleSubmit}
                        >
                          Sign Up
                        </button>
                      </div>
                      <div className='flex items-center justify-between pb-6'>
                        <p className='mb-0 mr-2'>Do you have an account?</p>
                        <button
                          type='button'
                          className='inline-block px-6 py-2 border-2 border-green-600 text-green-600 font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out'
                          onClick={handleLogIn}
                        >
                          Log In
                        </button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
export default SignUpForm; Go to and replace the h1 tag in the main tag with . pages/index.js <SignUpForm /> Do not forget to import it. Your form now should look like this: Now go to the sign up then create a new project by following the steps once you are done you will get a public ID. Note it because we will use it here. faceIO console We are going to register a user. In order to do this, we must first initialize the faceIO object. We will do this inside a so that even if the state changes it will not reinitialize faceIO object, remember to import the . useEffect useEffect Go to signUpForm.js and add the . useEffect //first import useEffect and useState
import React, { useEffect, useState } from 'react';
// initialize faceIO object
let faceio;
useEffect(() => {
    faceio = new faceIO('xxxxxxxxx');
  }, []);
//replace xxxx.. with your project id In order to register a user, we must have user registration logic (just the usual username and password) that will be stored together with the user's facial authentication data for future reference ( faceIO does not store an actual picture of the user but rather a vector which is hashed and cannot be reverse engineered ). You can read more about this . here Let us collect the user data, we are going to use a hook (hooks are react.js superpower). useState We are going to map the values of the username and password into a payload variable object. const [payload, setPayload] = useState({userEmail: '',pin: '',}); Go to the input field of name and update it so that its value is mapped to the , do the same also to the input field with the name pin: userEmail userEmail <input type='email' className='form-control...' placeholder='Your Email'name='userEmail' defaultValue={payload.userEmail} />
//and also
<input type='password' className='form-control...' placeholder='Your Email'name='pin' defaultValue={payload.userEmail} /> We need to create an function so that when the user types the info it can be stored in the payload object. onChange const onChange = (e) => {setPayload({...payload,[e.target.name]: e.target.value,});}; //Again do not forget to update the input fields by adding
onChange = {onChange} We will create a signup function that takes in the payload and enrolls the user to faceIO. Note that is a method of the faceIO object. enroll const handleSignUp = async (payload) => {
    try {
      let response = await faceio.enroll({
        "locale": "auto",
        "payload": { "email": `${payload.userEmail}`, "pin":  `${payload.pin}` }
});
console.log(` Unique Facial ID: ${response.facialId}
    Enrollment Date: ${response.timestamp}
    Gender: ${response.details.gender}
    Age Approximation: ${response.details.age}`);
    } catch (error) {
      console.log(error);
    }
  }; Let us now create a function that will submit all this info: handleSubmit const handleSubmit = (e) => {
    // prevents the submit button from refreshing the page
    e.preventDefault();
//just to confirm that payload has the info you may delete it after
    console.log(payload);
   handleSignUp(payload);
}; And as simple as that we have enrolled the user try it and you will see. When that user comes in next time and wants to log in he/she will only need to be authenticated. Let us make the function and update the log-in button: handleLogIn const handleLogIn = async () => {
    try {
      let response = await faceio.authenticate({
        locale: 'auto',
      });
console.log(` Unique Facial ID: ${response.facialId}
        PayLoad: ${response.payload}
        `);
    } catch (error) {
      console.log(error);
    }
  }; And with that we are done, see how simple it is. If you want to see the whole code you may access it on . GitHub That is the conclusion for now but always check in this space for more. Also published . here

Stories, News & Mentions about TAILWIND

Tailwind’s Stories on HackerNoon