DEV Community: Cezary Mazur

Unveiling the Magic of CSS Pseudo-Classes in Frontend Development

Cezary Mazur — Fri, 20 Dec 2024 11:58:41 +0000

Introduction:

Welcome to the fascinating world of CSS pseudo-classes, where styling meets interactivity!

As a front-end developer, you've likely encountered the need to style elements dynamically based on user interaction or element states.

CSS pseudo-classes come to the rescue, providing a powerful set of tools to achieve this. In this article, we'll explore the ins and outs of CSS pseudo-classes, leveraging information from official documentation and various online resources.

Understanding CSS Pseudo-Classes:

CSS pseudo-classes are selectors that target specific states or positions of HTML elements. They allow developers to style elements based on user interaction, such as hover effects, or the element's state, like styling visited links. Let's delve into some commonly used pseudo-classes:

:hover - Adding Interactivity:
One of the most popular pseudo-classes is :hover, which allows you to apply styles when a user hovers over an element. This is commonly used for creating interactive and engaging user interfaces.Caption: Adding a hover effect to a button.
```
button:hover {
  background-color: #3498db;
  color: #fff;
}
```
:active - Adding Feedback on Click:
The :active pseudo-class comes into play when an element is being activated by the user. It's often used to provide visual feedback when a button is clicked.Caption: Scaling down the button when it is clicked.
```
button:active {
  transform: scale(0.95);
}
```

Exploring Advanced Pseudo-Classes:

As your projects become more sophisticated, you'll find the need for advanced pseudo-classes to handle specific scenarios.

:nth-child() - Selecting Specific Children:
The :nth-child() pseudo-class allows you to select elements based on their position within a parent. This is useful for creating striped tables or styling specific items in a list.Caption: Styling odd list items with a different background color.
```
li:nth-child(odd) {
  background-color: #f2f2f2;
}
```
:not() - Selecting Elements Excluding Others:
The :not() pseudo-class is handy for selecting elements that do not match a given selector. This is useful when you want to style all elements except a specific one.Caption: Styling all input elements except submit buttons.
```
input:not([type="submit"]) {
  border: 1px solid #ccc;
}
```

Conclusion:

In conclusion, CSS pseudo-classes are a powerful tool for frontend developers to add interactivity and dynamic styling to web applications. By understanding and utilizing pseudo-classes effectively, you can create visually appealing and user-friendly interfaces. Remember to strike a balance between enhancing the user experience and ensuring compatibility across various browsers.

💬❤️ Leaving Comments, Reactions, and Saving the Article:

I value your feedback! If you found this article helpful or have any questions, feel free to leave a 💬 comment below. Your ❤️ reactions and insights contribute to the vibrant developer community. Don't forget to save this article for future reference and share it with your fellow developers!

For more frontend development insights, tutorials, and resources:

Visit cezarymazur.com

Or read more in others articles:

Cezary MazurFollow

AI Frontend Trainer & Consultant Consulting — Mentoring — Workshops Helping companies improve frontend processes. Transforming teams into AI-powered innovators.

Explore a wealth of information to sharpen your skills and stay updated on the latest trends in the ever-evolving world of web development.

🎉 Happy coding!

Styleguide in Tailwind CSS Step by step

Cezary Mazur — Thu, 04 Jan 2024 06:36:19 +0000

When starting work on a new project, whether small or large, it is worth establishing and programming an appropriate Styleguide at the beginning, which will be useful at every stage of the subsequent implementation of the project.

In this article, we will discuss step by step how to create a sample styleguide using TailwindCSS.

We will talk briefly about:

Installing TailwindCSS into your project
Uploading and configuring add-ons to TailwindCSS
Fonts configuration
Styling elements using the Tailwind and @apply classes
Overwriting and extending Tailwind classes in tailwind.config

1. Install TailwindCSS into your project:

To install Tailwind CSS, you need to use npm or yarn. Open your terminal and run the following command:

npm install tailwindcss

After installing, you need to create a configuration file. You can do this by running:

npx tailwindcss init

This will generate a tailwind.config.js file in your project. Customize this file to tailor Tailwind to your project's needs.

Read more about starting with TailwindCSS in my other article: Tailwind CSS - Beginner's Guide: Where to Start?

2. Uploading and configuring add-ons to TailwindCSS:

Tailwind CSS has a rich ecosystem of plugins and add-ons that you can use to extend its functionality. You can install these add-ons using npm or yarn and then add them to your tailwind.config.js file. For example, if you want to use the Typography plugin, you can install it using:

npm install @tailwindcss/typography

And then add it to your tailwind.config.js:

module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/typography'),
    // other plugins
  ],
}

You can consider using the PrelineUI plugin which can save you a lot of time when it comes to styling different elements such as:

Dropdowns
Accordions
Toggles
Dark mode (!) and so on, and so on.

Check my other article where I focus on PrelineUI and how it can help you while working with TailwindCSS:
TailwindCSS on hacks: Get to know PrelineUI

3. Font configuration:

Tailwind allows you to configure and use custom fonts easily. In your tailwind.config.js file, you can define the fonts you want to use:

module.exports = {
  // ...
  theme: {
    extend: {
      fontFamily: {
        custom: ['CustomFont', 'sans-serif'],
      },
    },
  },
}

Now, you can apply the font-custom class to use your custom font in your HTML.

4. Styling elements using the Tailwind and @apply classes:

Tailwind CSS provides a vast set of utility classes that you can use directly in your HTML. For example, to style a button, you can use classes like bg-blue-500, text-white, and py-2. You can also create custom styles using the @apply directive in your CSS:

.my-custom-style {
  @apply bg-blue-500 text-white py-2;
  /* additional styles */
}

5. Overwriting and extending Tailwind classes in tailwind.config:

In your tailwind.config.js, you can extend or overwrite existing styles. For example, if you want to change the default padding values, you can do:

module.exports = {
  // ...
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
      },
    },
  },
}

This extends the default spacing options in Tailwind with your custom values. You can similarly extend or override other configuration options to fit your project's style guide.

Summary

Tailwind gives you a lot of options when it comes to creating a styleguide. We briefly discussed a few of them, but that's not all. At every stage of creating a styleguide, it is worth using the Tailwind documentation, which is a mine of knowledge for beginners but also for experienced developers.

💬 Your Thoughts Matter!

If you have any questions or need help with creating your first styleguide with Tailwind - let me know in the comment - I will be happy to help. You can also contact me privately at kontakt@cezarymazur.pl

❤️ React, Share, Save

I also encourage you to leave reactions, comments and save this article for later.

Follow me if you are interested in Tailwind, from time to time I will raise new issues regarding Tailwind and how to work with it even more effectively.

Cezary MazurFollow

AI Frontend Trainer & Consultant Consulting — Mentoring — Workshops Helping companies improve frontend processes. Transforming teams into AI-powered innovators.

The new CSS pseudo-classes explained :has()

Cezary Mazur — Fri, 29 Dec 2023 16:58:05 +0000

Technology: CSS
Topic: Pseudo-classess explained
Version: 1.1
Author: Cezary Mazur
Author Website: https://cezarymazur.pl

CSS is developing more and more. In addition to various frameworks based on CSS or Sass (BootstrapCSS, TailwindCSS), CSS assembly itself is developing based on the needs and problems reported by developers. With development comes changes, new products, and often new things that are intended to make our programmers' lives easier. This is also the case with the new pseudo-classes in CSS.

In today's article I will briefly focus on the new pseudo-class :has().
This article will explain:

What is the :has() pseudo-class and what does it refer to?
How to use the :has() pseudo-class in practice?
Examples of using the :has() pseudo-class

If you are interested in how to start with TailiwndCSS, check out my latest article about: Tailwind CSS - Beginner's Guide: Where to Start?

1. What is the `:has()` pseudo-class?

To explain what the :has() pseudo-class is, first we need to explain what pseudo-classes in CSS are.

A pseudo-class is a keyword added to a css selector that specifies a special state of the selector.

The basic pseudo-classes are, for example:

:hover - state after hovering over the element
:focus - state when focusing on an element
:active - element activity status

We already know what a pseudo-class is, so now let's say what a `:has()` pseudo-class is responsible for

The :has() pseudo-class selects an element containing the specified content. For example, a:has(img) selects all <a> elements containing a child <img> element.

2. How to use the `:has()` pseudo-class in practice?

:has() in CSS is like a special tool that allows you to change the appearance of a parent element based on whether it contains a specific child or another element. This might seem a bit different from how we usually think about CSS, where styles are applied from parent to child. Until now, there hasn't been a direct way to style the parent based on its content, and there are technical reasons for that.

For example, you might want to style links only if they have images inside them. With :has() you can do this. This opens up new possibilities, like adding styles conditionally depending on the content of an element, which wasn't easily achievable with standard CSS.

The :has() selector is part of the CSS Selectors Level 4 specification, the same set of rules that include the handy :not() pseudo-class.

3. Examples of using a pseudo-class `:has()`

Let's assume you want to add a bottom margin to the <a> element, but (!) only to the one that contains the <img> element:

.a:has(img) {
  margin: 0 0 2em 0;
}

or depending on whether there is a subheading under the heading, you want to increase or decrease the bottom margin:

.heading h2 {
margin: 0 0 1.5em 0;
}

.heading-group:has(h2):has(.subtitle) h2 {
margin: 0 0 2em 0;
}

You could argue that the CSS :has() selector goes beyond being just a "parent" selector, and that's exactly what it is! In the example with subheadings, it's not necessarily about selecting the ultimate parent; instead, you might choose the parent based on a condition and then proceed to select a child element from there.

For instance:

figure:has(figcaption) { ... }

figure:has(figcaption) img { ... }

Here, the second selector specifically targets a child <img>, not just the parent containing the <figcaption>.

Summary

Time passes quickly and technologies, even as basic as CSS, are developing. In order not to be left behind, it is worth following the news and learning how to make even better use of what we have all known well for years. Thanks to this approach, we will be able to be and become programmers who are desirable in the labor market. And the work itself will bring more joy. Therefore, from now on, you can safely use the :has() pseudo-class, which will make your everyday work easier and faster 😄

Visit cezarymazur.pl

💬 Your Thoughts Matter!

We'd love to hear your thoughts on CSS and the different usage of CSS pseudo-classes. Have you used them in your projects? What has been your experience? Share your insights, suggestions, or any challenges you've faced in the comments below.

❤️ React, Share, Save

If you found this article helpful, consider sharing it with your fellow developers. React to the content and save it for future reference. Your engagement fuels our commitment to bringing you more insightful content.

Cezary MazurFollow

AI Frontend Trainer & Consultant Consulting — Mentoring — Workshops Helping companies improve frontend processes. Transforming teams into AI-powered innovators.

Visit cezarymazur.pl for more front-end development tips and tricks. Stay tuned for regular updates and in-depth tutorials to level up your coding game.

🎉 Happy coding!

Tailwind CSS on Hacks: Get to know Preline UI

Cezary Mazur — Wed, 27 Dec 2023 19:52:54 +0000

Technology: TailwindCSS
Series: Get to Know
Topic: PrelineUI
Version: 1.1
Author: Cezary Mazur
Author Website: cezarymazur.pl

User interfaces play a crucial role in the success of any web application or website. A well-designed UI enhances user experience, making navigation seamless and interactions intuitive. Two powerful tools in the web development arsenal, PrelineUI and TailwindCSS, come together to streamline the process of creating elegant and responsive user interfaces.

Understanding TailwindCSS

Before delving into PrelineUI, let's revisit the fundamentals of TailwindCSS. This utility-first framework provides a plethora of pre-designed classes, enabling developers to style their components without the need for custom CSS. Its declarative approach aligns well with modern development practices, making it a favorite among frontend developers.

Key TailwindCSS Concepts

Utility-First Philosophy: TailwindCSS promotes the idea of composing designs by combining small utility classes rather than writing custom CSS.
Responsive Design: TailwindCSS includes classes for responsive design, allowing developers to easily adapt layouts for various screen sizes.
Configuration: Developers can customize the framework's default settings using a configuration file, tailoring it to fit the project's specific needs.

Read more about how to start coding with TailwindCSS in my previous article: TailwindCSS - Beginner’s Guide: Where to start?

🤝 Introducing PrelineUI

What is PrelineUI?

PrelineUI is a comprehensive UI framework that empowers developers to build beautiful and functional user interfaces with ease. It offers a set of carefully designed components, styles, and utilities that can be seamlessly integrated into projects, saving time and effort during the development process.

Implementation in TailwindCSS

To integrate PrelineUI into your TailwindCSS project, you need to follow a few simple steps. First, install PrelineUI using your preferred package manager:

npm i preline

Next, add it to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  content: [
    // './src/**/*.{html,js}',
      'node_modules/preline/dist/*.js',
  ],
  plugins: [
    // require('@tailwindcss/forms'),
      require('preline/plugin'),
  ],
}

Include the JavaScript <script> that powers the interactive elements near the end of your </body> tag:

// index.html
<script src="./node_modules/preline/dist/preline.js"></script>

Key Features of PrelineUI

Component Library: PrelineUI provides a rich library of UI components, including buttons, forms, navigation bars, and more. These components are crafted with attention to detail, ensuring a consistent and polished look throughout the application.
Responsive Design: With a focus on responsiveness, PrelineUI ensures that your web application looks and works well on various devices and screen sizes. This is crucial in today's mobile-centric world, where users access websites from a multitude of devices.
Customization: While PrelineUI comes with a default set of styles, it also allows for easy customization. Tailor the look and feel of your UI to match the branding and design preferences of your project.
Documentation: The comprehensive documentation provided by PrelineUI makes it easy for developers to get started and leverage the full potential of the framework. Whether you are a beginner or an experienced developer, the documentation is a valuable resource for understanding and implementing PrelineUI components.

✅ Benefits of Using TailwindCSS with PrelineUI

Rapid Prototyping: TailwindCSS's utility-first approach allows developers to prototype and iterate quickly. Apply styles directly in the HTML, making it easy to experiment and see immediate results.
No Custom CSS: With TailwinCSS, there's often no need to write custom CSS styles. The framework provides a vast set of utility classes that cover common styling needs, reducing the amount of CSS code in your project.
Consistent Design Language: By combining PrelineUI's components with TailwindCSS, you can maintain a consistent design language throughout your application. Tailwind's utility classes can be used to fine-tune the appearance of individual components without sacrificing coherence.
Optimized Build Size: TailwindCSS is designed to generate optimized and minimal CSS builds. This is beneficial for performance, ensuring that your web application loads quickly and efficiently.

Conclusion

The combination of PrelineUI and TailwindCSS offers a powerful and efficient solution for crafting elegant and responsive user interfaces. By leveraging the strengths of these frameworks, developers can save time, maintain a consistent design language, and deliver a seamless user experience. Explore the documentation provided by PrelineUI and TailwindCSS to unlock the full potential of these tools and elevate the visual appeal of your web projects.

🌐 Visit cezarymazur.pl to see how I used TailwindCSS with PrelineUI in real life.

💬 Your Thoughts Matter!

We'd love to hear your thoughts on TailwindCSS and PrelineUI. Have you used these tools in your projects? What has been your experience? Share your insights, suggestions, or any challenges you've faced in the comments below.

❤️ React, Share, Save

Visit cezarymazur.pl **for more front-end development tips and tricks. Stay tuned for regular updates and in-depth tutorials to level up your coding game.

Happy coding!

GIT - Beginner’s Guide: Useful GIT commands you should know

Cezary Mazur — Sun, 24 Dec 2023 08:07:30 +0000

Technology: GIT
Series: Beginner's Guide
Topic: Useful GIT commands you should know
Version: 1.1
Author: Cezary Mazur
Author Website: https://cezarymazur.pl

Version control is a crucial aspect of modern software development, and Git stands out as one of the most popular version control systems. If you're a beginner navigating the vast world of Git, this guide will provide you with essential commands to kickstart your journey. From basic operations to more advanced features, we'll explore the functionalities that will make your development workflow smoother.

Understanding Git Basics

Each command in this article should be executed in a terminal in your project folder.

Initializing a Repository

To start using Git, you need to initialize a repository. This is where Git will track changes in your project.

git init

Cloning a Repository

If you're working on an existing project - for example project with the repository in GitLab, BitBucket, or GitHub - you can clone it to your local machine.

git clone <repository-url>

Day-to-Day Commands

Tracking Changes

Once your repository is set up, you'll make changes to your code. The following commands help you track and commit those changes.

git add <filename>
git commit -m "Your commit message"

Checking Status

It's crucial to know the status of your repository at any given time.

git status

Viewing Commit History

Understanding the commit history is essential for collaboration and debugging.

git log

Collaborating with Others

Pulling Changes

If someone else has made changes to the repository, you need to pull those changes to your local machine.

git pull

Pushing Changes

When you've made changes and want to share them with others, you push your commits.

git push

Branching

Branching allows you to work on new features or bug fixes without affecting the main codebase.

git branch <branch-name>
git checkout <branch-name>

Advanced Git Commands

Merging Branches

Once you've completed your work on a branch, you merge it back into the main branch.

bashCopy code
git merge <branch-name>

Resolving Conflicts

Conflicts may arise when merging branches with conflicting changes. Resolve them using:

git mergetool

Pros and Cons of Git

✅ Pros

Distributed Version Control: Git allows decentralized collaboration, enabling developers to work offline and merge changes seamlessly.
Branching and Merging: The ability to create branches and merge them easily facilitates collaborative development and feature isolation.
Fast and Efficient: Git is designed to be quick, making it ideal for both small and large projects.

😥 Cons

Learning Curve: For beginners, Git's extensive feature set can be overwhelming, leading to a steep learning curve.
Confusing Terminology: Concepts like "rebase" and "detached HEAD" can be confusing for new users.
Storage Size: Repositories with a long history can consume significant disk space.

Tips for Efficient Git Usage

Regularly Commit: Make small, frequent commits to create a comprehensive commit history.
Use Branches Wisely: Create branches for new features or bug fixes to keep the main branch stable.
Write Meaningful Commit Messages: Clearly articulate the purpose of each commit for better collaboration.

Visualizing Git Concepts

Images can help visualize Git workflows. Consider using icons or diagrams to illustrate concepts like branching, merging, and commit history.

How to learn Git?

Courses

One of the best ways to learn Git is through courses. You can find many of them for free on YouTube or purchase a course on Udemy. Regardless of which course you choose, it will help you better understand and implement the use of GIT.

Games

I highly recommend games that can help you learn Git and its commands:

LearnGitBranching: https://learngitbranching.js.org/
OhMyGit: https://ohmygit.org/

Leaving Comments, Reacting, and Saving the Article

I hope this guide provides you with a solid foundation for using Git. If you have any questions or thoughts, please leave a comment below.

Your feedback is valuable to me! If you found this article helpful, consider reacting to it and saving it for future reference.

Explore More

For further insights and in-depth tutorials, visit author's website.

Stay tuned for more articles on front-end development, and 😀 happy coding!

Tailwind CSS - Beginner's Guide: Where to Start?

Cezary Mazur — Thu, 21 Dec 2023 20:09:05 +0000

Technology: TailwindCSS
Series: Beginner's Guide
Topic: Where to start?
Version: 1.1
Author: Cezary Mazur
Authors Website: https://cezarymazur.pl

In the fast-evolving landscape of web development, staying up-to-date with the latest tools and frameworks is crucial for front-end developers. Tailwind CSS, a utility-first CSS framework, has gained immense popularity for its simplicity and flexibility. As we step into 2024, let's explore the essentials of Tailwind CSS and guide beginners on where to start.

1. Introduction to Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes for building designs directly in your markup. It's designed to be easy to learn and highly customizable, making it a favorite among developers for quickly prototyping and building modern user interfaces.

Getting Started:
To begin using Tailwind CSS, you'll need to install it in your project. The recommended way is through npm:

npm install tailwindcss

After installation, you'll need to create a configuration file:

npx tailwindcss init

This will generate a tailwind.config.js file where you can customize various aspects of Tailwind's behavior.

2. Understanding Utility-First Approach

One of Tailwind's distinctive features is its utility-first approach, where you apply small, single-purpose utility classes directly in your HTML. This approach streamlines development by eliminating the need to write custom CSS, letting you focus on building components.

Example:

<!-- Before -->
<div class="container mx-auto bg-blue-500 p-4">
  <p class="text-white">Hello, World!</p>
</div>

<!-- After -->
<div class="bg-blue-500 p-4">
  <p class="text-white">Hello, World!</p>
</div>

3. Exploring Tailwind's Documentation

Tailwind's official documentation is a treasure trove of information for both beginners and experienced developers. It covers everything from installation to advanced customization, making it an invaluable resource.

Key Sections in the Documentation:

Installation: Step-by-step guide to installing Tailwind CSS in your project.
Configuration: Customizing Tailwind to suit your project's needs.
Core Concepts: Understanding utility classes, responsive design, and pseudo-classes.
Plugins: Exploring and integrating plugins to extend Tailwind's functionality.

4. Pros and Cons of Tailwind CSS

Pros:

Rapid Development: Tailwind's utility-first approach speeds up development by reducing the need for custom CSS.
Flexibility: Highly customizable with a configuration file, allowing you to tailor it to your project's requirements.
Consistent Design: Enforces a consistent design language across your application.

Cons:

Learning Curve: Some developers find the utility-first approach initially challenging, especially if they are accustomed to traditional CSS.
File Size: Depending on your usage, the generated CSS file can be larger than manually optimized stylesheets.
Not Suitable for Every Project: While great for prototypes and small to medium-sized projects, it may not be the best fit for large-scale applications.

5. Building Your First Project with Tailwind

Now that you have a basic understanding of Tailwind, let's walk through building a simple project to reinforce what you've learned.

Project Structure:

Create HTML File:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>My Tailwind Project</title>
</head>
<body>
  <div class="bg-gray-200 p-8">
    <h1 class="text-3xl font-bold text-blue-500">Welcome to Tailwind!</h1>
    <p class="mt-4 text-gray-700">Start building amazing interfaces with ease.</p>
  </div>
</body>
</html>

Create CSS File (styles.css):

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Build and Run:

After creating your HTML and CSS files, run your project. You should see a styled welcome message using Tailwind CSS.

6. Conclusion

Tailwind CSS, with its utility-first approach and simplicity, remains a powerful choice for front-end development in 2024. By delving into its documentation, understanding the pros and cons, and building a simple project, beginners can kickstart their journey into the world of Tailwind.

Remember, practice is key. Experiment with Tailwind CSS in various projects to harness its full potential and discover how it fits into your development workflow. Stay curious, explore the ever-expanding ecosystem, and embrace the efficiency and flexibility that Tailwind CSS offers.

I hope this beginner's guide to Tailwind CSS in 2024 has been a valuable resource for your front-end development journey. Whether you're a seasoned developer or just starting, your thoughts and experiences matter.

Feel free to share your 💬 comments, insights, or questions below.

Did you find Tailwind CSS intuitive or encounter any challenges?

Your feedback can contribute to a vibrant community of learners. Don't forget to react, save this article for future reference, and feel free to visit the author's website: https://cezarymazur.pl.

Your engagement is highly appreciated, and I look forward to fostering a collaborative learning space.

Happy coding!

DEV Community: Cezary Mazur

Unveiling the Magic of CSS Pseudo-Classes in Frontend Development

Introduction:

Understanding CSS Pseudo-Classes:

Exploring Advanced Pseudo-Classes:

Conclusion:

💬❤️ Leaving Comments, Reactions, and Saving the Article:

Cezary MazurFollow

Styleguide in Tailwind CSS Step by step

1. Install TailwindCSS into your project:

2. Uploading and configuring add-ons to TailwindCSS:

3. Font configuration:

4. Styling elements using the Tailwind and @apply classes:

5. Overwriting and extending Tailwind classes in tailwind.config:

Summary

Cezary MazurFollow

The new CSS pseudo-classes explained :has()

1. What is the :has() pseudo-class?

We already know what a pseudo-class is, so now let's say what a :has() pseudo-class is responsible for

2. How to use the :has() pseudo-class in practice?

3. Examples of using a pseudo-class :has()

Summary

💬 Your Thoughts Matter!

❤️ React, Share, Save

Cezary MazurFollow

Tailwind CSS on Hacks: Get to know Preline UI

Understanding TailwindCSS

Key TailwindCSS Concepts

🤝 Introducing PrelineUI

What is PrelineUI?

Implementation in TailwindCSS

Key Features of PrelineUI

✅ Benefits of Using TailwindCSS with PrelineUI

Conclusion

💬 Your Thoughts Matter!

❤️ React, Share, Save

GIT - Beginner’s Guide: Useful GIT commands you should know

Understanding Git Basics

Initializing a Repository

Cloning a Repository

Day-to-Day Commands

Tracking Changes

Checking Status

Viewing Commit History

Collaborating with Others

Pulling Changes

Pushing Changes

Branching

Advanced Git Commands

Merging Branches

Resolving Conflicts

Pros and Cons of Git

✅ Pros

😥 Cons

Tips for Efficient Git Usage

Visualizing Git Concepts

How to learn Git?

Courses

Games

Leaving Comments, Reacting, and Saving the Article

Explore More

Tailwind CSS - Beginner's Guide: Where to Start?

1. Introduction to Tailwind CSS

2. Understanding Utility-First Approach

3. Exploring Tailwind's Documentation

4. Pros and Cons of Tailwind CSS

5. Building Your First Project with Tailwind

6. Conclusion

1. What is the `:has()` pseudo-class?

We already know what a pseudo-class is, so now let's say what a `:has()` pseudo-class is responsible for

2. How to use the `:has()` pseudo-class in practice?

3. Examples of using a pseudo-class `:has()`