Tailwind CSS is a great tool for building websites, but it doesn’t have any built-in support for web fonts like Google Fonts. This means that if you want to use custom fonts in your project, you will have to add them yourself. But don’t worry, it’s not as hard as it sounds!
Tailwind CSS is a different way to style your website from traditional CSS framework. Think of it as a set of predefined building blocks (or Lego pieces,) but for your website’s style. Instead of writing a bunch of CSS rules, you could use pre-made classes directly in your HTML code...
How to Set Full Width in Tailwind To make an element take up the full width of its container, use the w-full class. This is particularly useful when you want an element to stretch across the entire width of the screen or a specific container. htmlCopy This div will stretch to the ...
3. Simple Demo - use TailwindCSS in your application This is what we've all waiting for - let's build a simple page with TailwindCSS to check if everything works as expected. pages/index.vue <template> <Logowidth="100%"height...
We used bg-no-repeat to prevent the image from repeating, so it only displays once and we added the bg-center class to position the background image at the center of the container. To set the div's height, we used h-64, which is 16rem (or 64 units in Tailwind) and applied a 2...
Initialize Tailwindnpx tailwindcss init(if you see any related errors) Step 6: Deploy to Azure Both our Apps are Containerized with Docker, so pay attention to get theDockerfilefor each App. Use:[ docker build -t backend .] and tag and push: [docker tag backend {acrnam...
In this article, I will guide you on How to use Range picker in Vue.js Prerequisites node.js installed Tailwind CSS You can check how to install Tailwind CSS in vue.js from the below link How To Add Tailwind CSS n Vue.js Create Vue.js Project To create a Vue.js app, use the ...
Below, I’ll go through the process of creating a landing page in HTML. 1. Create the basic structure. To build an HTML landing page from the ground up, your best bet is to use a simple HTML framework like Material Design for Bootstrap (MDB), available in both free and professional ...
I always tend to forget how to align center vertically using Flexbox.You need a container with those CSS instructions:display: flex; align-items: center; justify-content: center;In Tailwind, this translates to the classes flex items-center justify-center....
Import the styles and fonts must be installed in your application directly. import "@fontsource/inter/500.css"; import "@fontsource/inter/700.css"; import "@howso/react-tailwind-flowbite-components/lib/styles.css"; Modify your tailwind.config.js configuration to include: import twContainerQueri...