Tailwind CSS响应式Web设计全面掌握指南

2024-02-2412:47:40WEB前端开发Comments2,020 views字数 10623阅读模式

Tailwind CSS响应式Web设计全面掌握指南文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

In this blog we will dive deep on how to create a responsive Web app using Tailwind CSS.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

在这个博客中,我们将深入探讨如何使用Tailwind CSS创建一个响应式Web应用程序。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

I will be using react along with Tailwind CSS you can use any technology with Tailwind CSS. The Tailwind CSS is the must.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

我将使用反应沿着与Tailwind CSS你可以使用任何技术与Tailwind CSS。Tailwind CSS是必须的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


Responsive design is an approach to web design and development that aims to make websites and web applications look and function good on all devices! A responsive web design will automatically adjust for different screen sizes and viewports.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


The primary goal of responsive design is to ensure that the user experience remains consistent and effective regardless of whether someone is accessing a website on a desktop computer, laptop, tablet, smartphone, or any other device with a web browser.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


Responsive web design is crucial in today’s digital landscape for several reasons:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


1.Improved User Experience

Responsive websites adapt to the user’s device, screen size, and orientation.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


This ensures that visitors have a consistent and user-friendly experience, whether they are accessing the site on a desktop computer, tablet, smartphone, or any other device.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


As most of the user uses phone or tablets to access the web, it becomes so much necessary to make the website responsive i.e to adjust the website according to the user’s screen. This will provide them a premium experience.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


A positive user experience can lead to increased engagement and longer time spent on your website.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

  • 积极的用户体验可以提高参与度并延长在网站上的时间。


With the increasing use of mobile devices to browse the internet, having a responsive design is essential文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


It allows your website to look and function well on small screens, making it accessible to a broader audience and potentially boosting mobile traffic.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


3.SEO Benefits

Search engines like Google prioritize mobile-friendly websites in their search results.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


A responsive design can improve your website’s search engine ranking, leading to more organic traffic.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html



As new devices with various screen sizes and resolutions continue to emerge, responsive design helps future-proof your website文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


It can adapt to these changes without requiring a complete redesign each time a new device becomes popular.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


5.Positive Brand Image

A well-designed, responsive website reflects positively on your brand.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


It demonstrates that you care about providing a good experience for your audience, which can improve your brand’s reputation and credibility.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


This are some reasons why you website should be responsive.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


Before we embark on our responsive journey, let’s delve into the world of Tailwind CSS for a moment.

Tailwind CSS is a popular utility-first CSS framework that simplifies and streamlines the process of building modern and responsive web designs.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

Tailwind CSS是一个流行的实用程序优先的CSS框架,它简化和简化了构建现代和响应式Web设计的过程。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

Tailwind CSS is an open source CSS framework.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

Tailwind CSS是一个开源的CSS框架。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

Tailwind CSS has gained popularity because it allows developers to quickly build and iterate on web designs without writing custom CSS, leading to more maintainable and consistent codebases.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

Tailwind CSS已经越来越受欢迎,因为它允许开发人员快速构建和扩展Web设计,而无需编写自定义CSS,从而导致更多的维护和一致的代码库。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

Tailwind CSS is a highly customizable, low-level CSS framework.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

Tailwind CSS是一个高度可定制的低级CSS框架。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

You can go to their website to know more about them their installation, their documentation and everything. The Documentation is well written and it solves pretty much every query.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


You can search for the things you want that makes it a lot easier to get the things. This is the website link — https://tailwindcss.com/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


Lets Start our responsive Journey with Tailwind CSS in this we will learn how to use it and what are the features provided.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

让我们开始我们的响应之旅与Tailwind CSS在这一点上,我们将学习如何使用它,以及提供了什么功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

I will be using a react app as discussed about. So create a react project or use a project that you are already working on. Add the tailwind in your react app by installing it using npm or your preferred package manager.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


Now lets talk how to make your app responsive using tailwind CSS.

By Default Tailwind uses the mobile first breakpoint system which means you first create your mobile design and then you can target the larger display using the breakpoints.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


For making a website responsive we need to use the media query i.e. '@media’ along with the min-width or max-width parameters. But as we are using the power of Tailwind CSS, to help us with the responsive design we don’t want to write the media query, the tailwind does it for us.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

为了使网站响应,我们需要使用媒体查询,即 '@media’ 沿着与min-width或max-width参数。但是当我们使用Tailwind CSS的力量来帮助我们进行响应式设计时,我们不想写媒体查询,Tailwind为我们做了这件事。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

There 5 Breakpoints available by default文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


Tailwind CSS响应式Web设计全面掌握指南文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

This breakpoints are min-width breakpoints i.e. it will take effect only when it crosses the threshold value in pixels.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


So ‘sm’ will target the device with width more than 640px and the ‘md’ will target the device with width more than 768px and so on.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


If we have define the sm and md breakpoints together then the value of the sm will be taken in consideration between 640px to 767px and as the pixels value rises more then 767px the sm value will be override by the md value and so on.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

如果我们一起定义了 sm 和 md 断点,那么在640px到767px之间将考虑 sm 的值,并且当像素值上升超过767px时, sm 值将被 md 值覆盖,依此类推。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

Using the predefined Breakpoints :

To use this breakpoints we just need to add the desired breakpoints name as a prefix followed by a ‘:’ this will add the breakpoints to that element.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


<div className="sm:bg-grey-200 md:bg-grey-400">
 Hello World

In Tailwind every utilities need their own breakpoints separately.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


<div className="sm:bg-grey-200 p-1 sm:p-2 md:bg-grey-400">
 Hello World

Breakpoints Range :

We can create a breakpoints range i.e. from this pixel range to that pixel range, it should apply the defined or attached property.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


To use the breakpoints range we just have to add max- followed by the predefined breakpoints name it could be ‘lg’, ‘xl’, etc. followed by the ‘:’ and then the attribute.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

要使用断点范围,我们只需要添加max-后跟预定义的断点名称,它可以是' lg ',' xl '等,后跟':',然后是属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

<div className="sm:max-lg:bg-grey-200 ">
 Hello World

Customizing the Breakpoints :

We can change the predefined breakpoints value or we can define new breakpoints of our own by defining it inside the tailwind.config.js file.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


If we want to change the definition we need to do it in the theme object value.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


If we want to change the whole predefined value we can override the predefined value by adding the style object inside the theme.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  plugins: [],

By adding the screens we are telling the Tailwind to use this screen option and not the default one. After defining this we cannot use the default one because the default one has been override by the screen definition.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


If we need to just update the value we don’t want the whole screen value to be overridden we can use the extend to define the value.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


We will define the screens object inside the extend object and then we will add the definition that we want to add.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
  plugins: [],

In the above example I have updated the value of the md breakpoints to 800px instead of the default pixel. By using the extend we can add new value or can change the default value without effecting the whole screen default value.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

在上面的例子中,我已经将 md 断点的值更新为800 px,而不是默认像素。通过使用扩展,我们可以添加新值或更改默认值,而不会影响整个屏幕的默认值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

Adding the max-width breakpoints Range :

We can also add max-width breakpoints to our theme if we want to. But by default the Tailwind is programed for min-width values, to make it max-width we need to add the value in the form of object that contains the key as max and the value as ‘1200px’ pixels.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

如果需要的话,我们还可以在主题中添加最大宽度断点。但默认情况下,Tailwind是为最小宽度值编程的,为了使其成为最大宽度,我们需要以对象的形式添加值,其中包含键为 max ,值为'1200 px'像素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      '2xl': {'max': '1535px'},
      // => @media (max-width: 1535px) { ... }

      'xl': {'max': '1279px'},
      // => @media (max-width: 1279px) { ... }

      'lg': {'max': '1023px'},
      // => @media (max-width: 1023px) { ... }

      'md': {'max': '767px'},
      // => @media (max-width: 767px) { ... }

      'sm': {'max': '639px'},
      // => @media (max-width: 639px) { ... }

In this way you can add the max-width queries to your own project.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


Adding the Fixed-range Breakpoints :

We can also define the fixed-range Breakpoints in our theme objects so that we can use it everywhere in our projects. For this we will define a object of value that will contain both min and the max value along with the pixel range.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

我们也可以在主题对象中定义固定范围的断点,这样我们就可以在项目中的任何地方使用它。为此,我们将定义一个值对象,它将包含#0 #和#1 #值沿着像素范围。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': {'min': '640px', 'max': '767px'},
      // => @media (min-width: 640px and max-width: 767px) { ... }

      'md': {'min': '768px', 'max': '1023px'},
      // => @media (min-width: 768px and max-width: 1023px) { ... }

      'lg': {'min': '1024px', 'max': '1279px'},
      // => @media (min-width: 1024px and max-width: 1279px) { ... }

      'xl': {'min': '1280px', 'max': '1535px'},
      // => @media (min-width: 1280px and max-width: 1535px) { ... }

      '2xl': {'min': '1536px'},
      // => @media (min-width: 1536px) { ... }

Arbitrary value or custom value for min and max :

If we don’t want to go through all the hassle of making a custom breakpoints inside the theme objects. We can make use of the min or max modifiers to generate a custom breakpoints on the fly using any arbitrary value.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

如果我们不想经历在主题对象内部创建自定义断点的所有麻烦。我们可以使用 min 或 max 修饰符来使用任意值动态生成自定义断点。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
  <!-- ... -->

In this way we don’t need to define the breakpoints in our tailwind config file. This is useful when we don’t want this breakpoints to be used for other component.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html


Key Points :

Don’t use sm: to target mobile devices.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

不要使用#0 #来定位移动的设备。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

Use unprefixed utilities to target mobile, and override them at larger breakpoints.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html



<div className="bg-black sm:bg-grey-200 md:bg-grey-400">
 Hello World

Let the bg-black be the mobile version and then use the breakpoints for larger screens.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

让 bg-black 是移动的版本,然后使用更大屏幕的断点。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/61185.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/61185.html


匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: