Create a Portfolio Enough of this theory and preparations! It's time to roll up your sleeves and jump into the code 🚀 In this tutorial, we'll learn how to create an impressive portfolio that you can later use as your own in real life. We will use advanced flexbox techniques to create a complex layout and we take advantage of the full potential of the TW Elements package. Click the button below to see a demo of the project we will build.

Blank

How to hide elements on small screen - Tailwind CSS tutorial

Hiding elements on mobile Do you remember the lesson about responsivenesswhen we talked about Mobile First Approach in Tailwind? The mobile-first approach in web design is a development strategy that prioritizes the creation and optimization of a website for mobile devices before scaling it up to larger screens, such as tablets and desktops. In practice, this means starting with the smallest screen size for your design and layout, and then progressively enhancing the design for larger screens using CSS media queries.

Improving icons visibility - Tailwind CSS tutorial

Improving icons visibility Our navbar gained a nice scroll animation, but the icons on the right side lost their visibility. We need to improve this. Step 1 - add .text-white to the icons In each <a> element inside <div id="navbar-icons"> we need to replace the ..text-neutral-600 class with the .text-white class: HTML <!-- Right elements --> <div id="navbar-icons" class="relative flex items-center"> <!-- YouTube Icon --> <a class="mr-4 text-white transition duration-200 hover:text-neutral-700 hover:ease-in-out focus:text-neutral-700 disabled:text-black/30 motion-reduce:transition-none dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.

Improving responsiveness - Tailwind CSS tutorial

Improving responsiveness Our navbar and its animation look really good on large screens. However, they require improvements in mobile view. Step 1 - initialize Collapse First we need to add Collapse to the JavaScript initialization so that in the mobile view our navbar can be expanded. It's simple - just add Collapse to the initialization in the src/js.index.js file: src/js.index.js // Initialization for ES Users import { Carousel, Collapse, initTE } from 'tw-elements'; initTE({ Carousel, Collapse }); Now when you reduce the screen width and click on the hamburger icon, you will be able to expand the navbar in mobile form.

Simple logo tutorial

Logo The logo is an essential element of brand identification in any business. Using one of the free tools from the MDBootstrap environment - Logo Generator, we will create a simple logo that we will add to the navbar in our portfolio. Of course, such a logo will not replace a fully professional logotype created by a designer, but it will certainly be enough to start. Step 1 - create a logo Go to the Logo generator page.

Tailwind CSS & Material Minimal design system

Material Minimal Let's stop for a moment and look at one very important concept - TW Elements design system called Material Minimal. Designing a user interface (UI) is a complex process that requires a cohesive, scalable, and sustainable approach. To meet these demands, some kind of system is needed to prevent us from constantly reinventing the wheel. However limiting it may seem (and arousing resistance especially for those designers who feel more like artists than craftsmen), I would like you to remember one thing: We need something to limit our design choices.

Tailwind CSS - Carousel half screen

Half carousel In this lesson, we'll use the component we saw in the previous tutorial, the carousel. We will modify it a bit to fit our Split screen. Step 1 - add carousel Copy the basic example from the carousel documentationand insert it into the second column of the grid in our Split screen. HTML <!-- Section: Split screen --> <section class=""> <!-- Grid --> <div class="grid h-screen grid-cols-2"> <!

Tailwind CSS - Cascading cards

Cascading cards Our Split screen intro section and navigation are ready and we can move on to the next step. This time we will create the "My projects" section and add special, cascading cards to it. Step 1 - add an empty "My projects" section Inside the <main> section add a .container class with auto margins and padding. Then inside the .container add an empty "My projects" section with a heading.

Tailwind CSS - Nested flexbox tutorial

Nested flexbox In the previous tutorial, we used flexbox to center content vertically and horizontally. In this lesson, we will learn how to create a complex layout by embedding one flexbox into another. Step 1 - add main headings Let's add a main heading to the first column in our intro. We covered text styling in one of the previous lesson, so I won't go into it in detail. As you can see, we put our headings in an empty div that we will use for the flexbox (which in the next steps we will put in another flexbox, creating a nexted flexbox).

Tailwind CSS - Object fit

Object fit To fix images in our carousel we need to use CSS property called object-fit. Tailwind has utility classes for this property, so let's have a look at how exactly it works. How it works: The object-fit property in Tailwind CSS is used to specify how an image or video should be resized to fit its container. It accepts the following values: contain: Resize the content to stay contained within its container.

Tailwind CSS - Object position

Object position The object-position property in Tailwind CSS is used to specify the position of an image or video within its container. It accepts the values like: top: The image or video is positioned at the top of its container. bottom: The image or video is positioned at the bottom of its container. left: The image or video is positioned at the left of its container. right: The image or video is positioned at the right of its container.

Tailwind CSS - Position Properties tutorial

Position In the previous lesson, we used the .fixed class which manipulated the CSS property position and allowed us to attach a Navbar to the top of the screen. Let's look at this topic a little closer because it often causes confusion. The position property has four possible values, each of which affects how an element is positioned within its containing element or the viewport. static This is the default value, and elements with position: static are positioned according to the normal flow of the document.

Tailwind CSS - Sticky navbar tutorial

Sticky navbar Navigation is a key element of any website. However, this is a very complex element and creating a good navigation is a real art. In this lesson, we'll learn how to create a navbar that all the time remains visible at the top of the screen when scrolling down the page, so that the user has easy access to it at all times. This is not always the optimal solution, but in our case it will be desirable.

Tailwind CSS -responsive images tutorial and examples

Responsive images Adding responsiveness to images in Tailwind CSS is very easy, but there is a trick here that we need to discuss. By default, the image will not exceed the width of its parent - thanks to this, graphics in cards do not extend beyond the card, even though they are larger than it. AI engine Finished 13.09.2023 for TechifyUt pretium ultricies dignissim. Sed sit amet mi eget urna placerat vulputate.

Tailwind CSS animated navbar

Animated navbar Our navbar already looks good, but we can still improve it. Currently, the color of our navbar is fixed. However, we, using a bit of custom CSS and JS, will create an animated navbar, which will be transparent at the start, and when the user starts scrolling, the navbar will change color. Here's what we want to achieve: Step 1 - prepare the navbar We need to add some small modifications to our navbar:

Tailwind CSS Split Screen

Split screen Once again, click the button below and have a look at the final demo of our portfolio. See the final demo Pay attention to the characteristic screen divided into two equal parts. This is a variation of the Full Screen Hero Image, which you know from the previous tutorial. In this lesson, we will learn a technique that will allow us to create such a Split screen.

Tailwind CSS tutorial - improving the carousel

Improving the carousel Our carousel is already working, but it doesn't look perfect. So let's improve a few important details to make it look its best. Step 1 - fix the image Images in the carousel are distorted. So let's use the Object fit and Object position properties to fix this. As you remember from the previous lessons, to do it in Tailwind CSS we need to add for example .

TW Elements and MDB CLI tutorial

MDB CLI Installation via MDB CLI is the most efficient way to use TW Elements. It enables options such as: Free hosting (supports custom domains, SSL, FTP access) Easy updates with a single command Backend starter templates (Laravel, plain PHP, node.js & more) WordPress setup in 3 minutes (blog, ecommerce or blank project) Git repository for you and your team Note: If you already have Node.

TW Elements download, installation and setup

Installation and setup I will show you 2 methods to install TW Elements: CDN method - the easiest and fastest method, but with many limitations. In fact, it should only be used for quick testing. MDB CLI installation - a recommended method that allows you to use the full potential of the TW Elements environment I suggest you try both methods, but in the end it's best if you use MDB CLI.

TW Elements tutorial - learn Tailwind CSS on steroids

TW Elements tutorial As with Tailwind CSS, here too let's start with a key question: What exactly is TW Elements? TW Elements a.k.a. TE (or TE UI KIT) is a library that greatly extends the capabilities of regular Tailwind CSS. You can look at TW Elements as Tailwind CSS on steroids. And it's free. Why use TW Elements? TW Elements contains all the features of Tailwind CSS and additionally provides you with: Tens of additional quality components, design blocks & templates Stunning design system called Material Minimal Interactivity in components such as dropdowns, charts, data tables, date picker, lightbox galleryand many others Integration with the most popular JavaScript libraries, such as React, Angular, Vue or Svelte Integration with the most popular backend technologies such as Node.

Blank

Blank

Blank

Create a website with TW Elements

Create a website In previous lessons, we learned a lot about preparing the environment, configuration, and deployment. All this is very important, but it's time for us to finally get a taste of Tailwind and TW Elements. Let's jump in to the code! 🚀 Step 1 - launch the project We will use the MDB GO starter project we worked on in the previous lesson. If you don't already have it running, open a terminal, navigate to the directory where you have your project and enter the following command: terminal npm start After entering the above command, MDB GO should start a local server on your computer and launch a browser window with your project.

HSLA colors explained - Tailwind CSS tutorial

HSLA colors Let's go back for a moment to the HSLA color we used in our mask. In fact, we could use color in any format. HEXA or RGBA color will work just as well. However, I recommend that you always use HSLA colors, because it is the easiest to adjust them when creating a design. We will learn more about this in future lessons. HSLA stands for Hue, Saturation, Lightness, and Alpha.

Spacing utilities explained - Tailwind CSS tutorial

Spacing The elements in Call to action are very close to each other, which makes them seem squeezed. I don't know about you, but I have the impression that they are asking for some space and breath. This is exactly what Tailwind's spacing utilities classes are for - they allow us to offset elements in 4 directions - up, down, left and right. Thanks to spacing utilities we can easily manipulate padding and margin of any element.

Tailwind CSS - deploy project with MDB GO

MDB GO and deploy While Vite is a great tool, as you've probably noticed, it takes a bit of work to install and set up. That is why we have created a tool that streamlines the entire process. This tool is called MDB GO and in addition to faster and easier installation, it also allows you to publish our project on the Internet with a single command. Let's add that these are only the basic of its many functionalities.

Tailwind CSS - JavaScript tutorial

JavaScript As the name suggests, Tailwind CSS is a CSS framework. It does not contain JavaScript code and does not offer solutions related to it. However, that doesn't mean we shouldn't use JS in Tailwind. Quite the opposite. By not providing any JavaScript code by default, Tailwind wants to be agnostic - that is, it has no "preference" when it comes to the technologies it will be used with - be it React, Vue, Angular, Svelte or any other JavaScript code - Tailwind CSS will make friends with everyone.

Tailwind CSS - setup overview

Setup overview Let's have a closer look at how a Tailwind CSS project is set up, what the file structure is, and what exactly the basic code does Note: If you stopped the process in your terminal, you need to start it again. Type npm start command and press enter. MDB GO can start the local server again. After that, it should open a new browser window with the live preview of your project.

Tailwind CSS advanced grid tutorial

Advanced grid We have already learned the power of Grid CSS and we have successfully used it several times. However, there is something about our Pricing section that I don't like. Let me explain what I mean. Our pricing cards look fine on large screens - they sit next to each other in three equal columns and that's fine. It also looks fine on mobile - the cards stack one under another and that's desired behavior.

Tailwind CSS badges tutorial

Badges Badges are small components useful for labeling and providing additional information. We will use them to finish our contact section. Basic example Badge is an element for the use of drawing attention to additional interface information with eye-catching appeal, typically displaying unread messages count. HTML <h2 class="text-4xl font-medium leading-tight"> Example heading <span class="inline-block whitespace-nowrap rounded-md bg-primary-100 px-4 py-3 text-center align-top text-lg font-bold leading-none text-primary-700" >New</span > </h2> Example heading New The construction is very simple, but let's explain the classes present here one by one: inline-block: This applies display: inline-block to the element.

Tailwind CSS Buttons - tutorial

Buttons We already talked a bit about buttons in the previous lesson, now let's finally roll up our sleeves and create a decent button. Creating a basic button In our project, in the Call to action section, below the headings, add the following button code: HTML <button class="rounded bg-blue-500 px-4 py-2 text-white">Click Me</button> This will be the result: Click Me In this example, we've applied several classes to the button: bg-blue-500: This sets the button's background color to a specific shade of blue.

Tailwind CSS cards tutorial

Cards Cards are one of most popular components. These are very flexible "content containers" with extensible options for headers, footers, images, and a wide variety of content. Basic example This is a simple card with a title, text, and button. Card title Some quick example text to build on the card title and make up the bulk of the card's content. Button You already know most of these classes from previous lessons.

Tailwind CSS Carousel - tutorial and examples

Carousel Carousel is a very representative component. It is perfect for presenting various types of media - from photos to videos. As we know from previous lessons, Tailwind CSS itself does not provide such components, but the TW Elements library does. Let's learn how to use it in our project. Step 1 - add empty section with grid First, we need to prepare a space where we will place the carousel.

Tailwind CSS columns reordering tutorial

Reorder columns In the previous lesson, we managed to create an advanced Grid with a good-looking tablet view. However, some problem remained. The natural reaction of human perception is that what is in the middle is the most important. Therefore, in the desktop view, when we have 3 cards next to each other, the middle one is the best highlighted (we strengthen this impression by adding a stronger color to the button).

Tailwind CSS deploy tutorial

Deploy Woah, we've finished our first project! Take a look - it looks perfect on both big screens and mobile devices. It is 100% responsive. Demo and source code Now it's time to share it with the world! In this lesson you will learn how, thanks to MDB GO, you can easily and free of charge publish and host your website on the Internet. Prerequisites To use MDB GO and publish and host your projects for free you need: Node.

Tailwind CSS download, installation and setup

Installation In this lesson, we will download, install and set up Tailwind CSS in the easiest possible way, in just a blink of an eye. We will be using the TW Elements version of Tailwind CSS. Why? As I mentioned in the previous lessons, you can look at TW Elements as Tailwind CSS on steroids. And it's free. TW Elements contains all the features of Tailwind CSS and additionally provides you with: Tens of additional quality components, design blocks & templates Stunning design system called Material Minimal Interactivity in components such as dropdowns, charts, data tables, date picker, lightbox galleryand many others Integration with the most popular JavaScript libraries, such as React, Angular, Vue or Svelte Integration with the most popular backend technologies such as Node.

Tailwind CSS footer tutorial

Footer A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements. It is placed at the bottom of your website. Footers can hold multiple different components. Let's go through the most popular ones one by one. Copyrights Footer can also be very simple with no link, only copyrights information, so you won't distract users. HTML <footer> <!

Tailwind CSS forms tutorial

Forms Let's use the knowledge about input elements that we acquired in the previous lesson and create some full-fledged forms. Every group of input fields should reside in a <form> element. TW Elements provides no default styling for the <form> element, but there are some powerful browser features that are provided by default. Login form Using email and password inputs, and adding a checkbox, button and 2 links, we can create an attractive Login Form: HTML <div class="block max-w-sm rounded-lg bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.

Tailwind CSS fullscreen background image (hero image)

Fullscreen background image You probably know websites with an impressive background photo that cover the entire screen. These intro sections, also called Hero Section or Hero Image, have gained well-deserved recognition. They are beautiful, it's true. However, they can cause a lot of frustration, because adapting them to look good on both large screens and mobile devices is a bit of a challenge. But don't worry about it. Today is your lucky day because you'll learn how to create full-page Hero Sections that not only look stunning, but also work perfectly on screens of all sizes.

Tailwind CSS Inputs tutorial

Inputs Almost every project requires a form, and every form consists of input elements. Let's look at them. Basic input field TW Elements uses Material Design-specific inputs. They have a small full border, but when you click on them, the label jumps up. Example label Apart from the large number of tailwind classes, a basic example of the input field consists of the input element with specified ID and label element connected via this ID with the input.

Tailwind CSS IntelliSense - best VSCode extension

Tailwind CSS IntelliSense Before we move on to other topics related to Tailwind, I would like us to take a look at one extremely useful tool. I mean Tailwind CSS IntelliSense, which is an extension to the Visual Studio Codeeditor. To be honest, it's hard for me to imagine working with Tailwind without this plugin now, and that's why I want you to install it too and learn how to use it.

Tailwind CSS lists tutorial

Lists Many novice users are surprised that Tailwind's lists are not styled by default. This means that whether we use <ol> or <ul>, they will have no bullets or numbers by default. Ordered list One Two Three Unordered list One Two Three But don't worry, Tailwind CSS offers us various utility classes to customize the appearance and behavior of lists. We can leverage these classes to style lists according to their design requirements.

Tailwind CSS Masks explained - Tailwind CSS tutorial

Masks The visibility of our Call to action is still very poor. To increase the contrast, we could use a different, darker background image. For example, let's change the image to this: To do this, we need to replace the current image address with the new one in the url, i.e. https://mdbootstrap.com/img/new/textures/full/148.jpg Of course you can use another picture if you don't like this one. Just update the address in the inline CSS added to our Background image section: HTML <!

Tailwind CSS Navbar - tutorial

Navbar The biggest issue with Tailwind CSS is that it does not offer ready-to-use components, such as a navigation bar. However, this is not a problem if a component library such as TW Elementscomes to the rescue. Thanks to it, we can not only fully use the potential of Tailwind CSS itself, but also have dozens of ready-to-use elements at our disposal. In this lesson, we will focus on a rather complex component, which is Navbar.

Tailwind CSS Pricing Cards tutorial

Pricing cards In the previous lesson, we learned how to use the basic cards in Tailwind. Now we will use this knowledge to create custom cards that will be used to build the pricing section. Step 1 - add pricing section with a grid Below the "Details" section, add another "Pricing" section. Place a grid with 3 columns and lg breakpoint in it. Also, add a heading. HTML <!

Tailwind CSS repository tutorial

Repository You have completed your project and published it on the web. Good job! However, there is one more important task ahead of us - creating a repository. Thanks to the repository, you will be able to control changes in your project and version them accordingly. Additionally, thanks to the repository, you can work on your project with other people in an organized way. No technological project can do without a repository.

Tailwind CSS Ripple Effect - tutorial

Ripple effect Perhaps you know (or maybe you are finding it out now 😉) TW Elements is based on a design system called Material Minimal. Material Minimal is an improved version of the famous Material Design, a system created by Google. One of the most distinctive things about Material Design and Material Minimal is the so-called Ripple Effect (or Waves Effect). Click the button or image below to see the Ripple Effect in action.

Tailwind CSS rounded corners / border radius tutorial

Rounded corners / border radius This lesson will be easy, sweet, and short. We will learn how to add rounded corners in Tailwind CSS and use the border radius property. Rounded corners are a detail, but very important in design. Note: In design theory, rounded corners require less cognitive (i.e. related to learning and understanding reality) effort. They also look friendlier to us. Why? This is related to the so-called "

Tailwind CSS shadows tutorial

Shadows In this lesson we will take some time to learn the theory behind the shadows. As in Material Design, shadows play a big role in Material Minimal(TW Elements design system). However, they are definitely more subtle here - they have brighter colors and are often more extensive. Unlike Material Design, Material Minimal is not afraid to use colored shadows, which can be seen in the example of our buttons.

Tailwind CSS sizing tutorial

Sizing I don't know if you've noticed, but when we moved our cards to external divs serving as columns in the grid, they stopped having the same height. This is how it looked when the cards served as columns at the same time: By default, the card's height is defined by its content (that is, the card's height will adjust to the amount of content you add to it) so this is what it looks like now that we've moved the columns to the outer divs: This is because only elements that are direct children of the grid have their height set to 100%.

Tailwind CSS tutorial - Arbitrary values explained

Arbitrary values Arbitrary value support in Tailwind CSS allows you to use any custom value with any utility where it makes sense. It's a powerful feature introduced in Tailwind CSS v2.2. This means you're no longer limited by the values defined in your configuration file and can use any value you need right in your HTML. For example, if you want to set a width that isn't available in Tailwind CSS classes, you can now do so like this: HTML <div class="w-[123px]">[.

Tailwind CSS tutorial - colors explained

Colors Colors in Tailwind CSS are defined as classes that you can apply directly to your HTML elements. In this lesson, we'll learn how they work. Color utility classes Tailwind CSS comes with a wide variety of predefined colors. Each color has different shades, ranging from 100 (lightest) to 900 (darkest). You can use these colors and shades by adding the corresponding utility classes to your HTML elements. For example, if you wanted to set the background color of an element to light blue, you would add the .

Tailwind CSS tutorial - containers explained

Containers If you've used Bootstrap before, you probably remember that there containers are necessary for the proper functioning of the grid system. So it can be a bit confusing that in Tailwind containers don't have such an important function, and grid can do just fine without them. However, this does not mean that containers are useless in Tailwind. Quite the opposite. But they just play a different role. Let's have a look at them.

Tailwind CSS tutorial - create a Landing Page

Create a Landing Page Hey, this is a very exciting moment! Do you know why? You have already set up the project and prepared the Tailwind CSC environment. So now we can roll up our sleeves and have some fun while learning. We will create a real-life project. It will be a beautiful Landing Page with impressive photography stretched to full screen. Click on the button below to see its final version:

Tailwind CSS tutorial - Dark mode explained

Dark mode Psst! Press shift + D to toggle dark/light mode on this website. For some time now, dark mode has ceased to be just a fashionable novelty, and has become a mandatory functionality of good design. Thanks to Tailwind, the implementation of dark mode in our project is child's play. Dark mode Dark mode reduces eye strain in low-light conditions, saves energy on OLED screens, and offers a visually refreshing aesthetic.

Tailwind CSS tutorial - Flexbox explained

Flexbox It's time to take a look at another famous Tailwind CSS tool - flexbox. In fact, flexbox itself is not a creation of Tailwind, but simply CSS, but thanks to Tailwind, we can comfortably use flexbox using the class utilities. But enough talk, let's explain it better with examples. Step 1 - add headings Our Hero Image is impressive, but since it contains no content, it is of little use.

Tailwind CSS tutorial - Focus, active and other states explained

Focus, active and other states Hover isn't the only state supported by Tailwind CSS. Thanks to Tailwind we can use directly in our HTML any state available in regular CSS. Below are examples of several pseudo-class states supported in Tailwind CSS. You don't have to try to memorize them now, we'll cover them in detail in the next lessons. For now, just be aware of their existence so you won't be surprised if you spot them in some TW Elements component.

Tailwind CSS tutorial - from basics to advanced features

Tailwind CSS tutorial Let's start with the key question: What exactly is Tailwind CSS? Some call it a library, but that's not entirely correct. Tailwind CSS is a utility-first CSS framework, not a library. It provides pre-designed classes that you can use to style your HTML elements, rather than individual components or functions. However, specifying the exact type name is not that important. The important thing is that Tailwind CSS allows us to create responsive websites and web applications faster and easier.

Tailwind CSS tutorial - grid system explained

Grid system in Tailwind CSS If you've used Bootstrap before, the Tailwind CSS grid can seem a bit confusing at the beginning. But actually it is very simple (maybe even simpler than the one in Bootstrap). Unlike the default grid in Bootstrap, which is based on flexbox, the Tailwind CSS grid system is based on CSS grid. Let's see what exactly this means in practice and how it works.

Tailwind CSS tutorial - Hover state explained

Hover state The thing where Tailwind CSS really shines is applying different CSS states, like hover, to our UI elements. The hover state in Tailwind is used to apply styles to an element when the mouse pointer is over it. This is similar to the :hover pseudo-class in CSS. Hover over the rectangle below and it will turn from blue to red. Hover me Hover in regular CSS To achieve this effect in regular CSS, we would need to apply code like the following: css #rectangle { background-color: blue; } #rectangle:hover { background-color: red; } Of course we would also need to add the id #rectangle to the HTML element to specify where exactly our CSS should be applied.

Tailwind CSS tutorial - icons and SVG explained

Icons If you've used popular icon sets before, such as Font Awesome or Material Icons, you've probably used a simplified version where we include a link to the entire icon set, and then use these icons in our HTML in the form of defined classes, such as: HTML <i class="fas fa-heart"></i> And a heart appears in your project: However, for performance reasons, Tailwind CSS recommends using icons as SVG elements.

Tailwind CSS tutorial - Navbar with logo and icons

Navbar icons and logo Now that we know how to work with icons in Tailwind, it's time to update the Navbar in our project. This is how it looks right now: svg]:w-7" Dashboard Team Projects svg]:w-5" svg]:w-5" 1 Action Another action Something else here Action Another action Something else here First, let's change the icons on the right.

Tailwind CSS tutorial - responsive grid explained

Responsiveness Nowadays, when most users access the Internet on mobile devices, we wouldn't have much use for grid if it wasn't for responsiveness. But what exactly do we mean by "responsiveness"? Responsive web design (RWD) in Tailwind CSS Responsive web design is a design and development approach that ensures a website or web application adjusts its layout, images, and functionalities to suit different devices, like desktops, tablets, or smartphones.

Tailwind CSS versions - which should you use?

Tailwind CSS versions If you are new to Tailwind CSS, you may be wondering what version you should use. New users often ask themselves questions such as: What is the latest version? What are the changes in the latest version compared to the previous one? Is the latest version stable already? Is there sufficient support in the form of third-part tools, plugins, and add-ons for the latest version?

Text utilities explained - Tailwind CSS tutorial

Text At the end of the previous lesson, we finally managed to place the Call to action elements perfectly in the center of our Hero Image. But the result is far from satisfactory. First of all, you can hardly see anything here! Step 1 - change the color of the text Changing the text color in Tailwind is simple and we've talked about it in the previous lesson. To change it, for example, to white, just add the .

TW Elements - quick start with CDN

Quick Start We have a long and fascinating journey ahead of us. However, before we move on to the individual aspects of our planned tour, I would like you to have the opportunity right now to feel the potential that TW Elements gives you. Therefore, in this short and concise lesson, I will show you how super fast and easily you can launch TW Elements and create your first small project.

TW Elements Foundations - introduction

Introduction Welcome to the TW Elements course! This beginner-friendly, example-based course will guide you through the essential knowledge of our ecosystem. Here you will learn not only how to effectively use TW Elements, but also Tailwind CSS itself, Material Minimal design system, UI & UX design and MDB GO. What will you learn Tailwind CSS TW Elements Responsive web design Material Design Material Minimal UI/UX design MDB GO If you are not familiar with the above terms - don't worry.

TW Elements Foundations - Key concepts

Key concepts Let's briefly discuss the topics that we will cover in this course. Tailwind CSS Tailwind CSS is a highly customizable, utility-first CSS framework designed for rapidly building modern and responsive web interfaces. It offers a unique approach to styling by providing a vast array of low-level utility classes that can be easily combined to create unique designs without writing custom CSS. Its greatness lies in its ability to promote fast development, consistency across projects, and ease of maintenance, allowing developers to focus on creating visually appealing and functional user experiences with minimal effort.

Utility-first in CSS - Tailwind CSS tutorial"

Utility-first approach Utility-first is an approach that revolutionized CSS in recent years and made Tailwind CSS extremely popular. But what is it exactly about and why does it matter? In this lesson, we'll use a (seemingly) simple button component to explain the concept of the utility-first approach. Although small, the buttons can cause trouble. Compared to, for example, Bootstrap, where buttons consist of only 2 classes (e.g. .btn and .

Vite - installation and setup with Bootstrap

Vite Although the CDN method is quick and easy, it has many limitations: is not optimized, so we have to load the entire Tailwind CSS and TW Elements code, even if we only use a small part of it we can't take full advantage of customization we can't take full advantage of theming we don't have live reload, so we have to manually refresh the browser after every change and it lacks a lot of other valuable features, which we will learn about in later lessons That's why we need a tool that will provide us with all these things.

Coming soon - TW Elements

Coming soon We're working on it. Subscribe to our newsletter if you want us to inform you when it's ready. Your email address Submit By subscribing you agree to receive the newsletter & commercial information from the data administrator StartupFlow s.c. Kijowska 7, Warsaw.Policy Go back