In this blog we will dive deep on how to create a responsive Web app using Tailwind CSS.

在这个博客中，我们将深入探讨如何使用Tailwind CSS创建一个响应式Web应用程序。

I will be using react along with Tailwind CSS you can use any technology with Tailwind CSS. The Tailwind CSS is the must.

我将使用反应沿着与Tailwind CSS你可以使用任何技术与Tailwind CSS。Tailwind CSS是必须的。

首先，什么是响应式设计，为什么它很重要？

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.

响应式设计是一种网页设计和开发方法，旨在使网站和Web应用程序在所有设备上都能良好地运行。响应式网页设计将自动调整不同的屏幕尺寸和视口。

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.

响应式设计的主要目标是确保用户体验保持一致和有效，无论用户是在台式计算机、笔记本电脑、平板电脑、智能手机还是任何其他具有Web浏览器的设备上访问网站。

Responsive web design is crucial in today’s digital landscape for several reasons:

响应式网页设计在当今的数字环境中至关重要，原因如下：

1.Improved User Experience

Responsive websites adapt to the user’s device, screen size, and orientation.

响应式网站适应用户的设备、屏幕大小和方向。

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.

这确保了访问者拥有一致且用户友好的体验，无论他们是在台式计算机，平板电脑，智能手机还是任何其他设备上访问网站。

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.

由于大多数用户使用手机或平板电脑访问网页，它变得非常有必要使网站响应，即根据用户的屏幕调整网站。这将为他们提供优质的体验。

A positive user experience can lead to increased engagement and longer time spent on your website.

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

2.Mobile-Friendly

With the increasing use of mobile devices to browse the internet, having a responsive design is essential

随着越来越多的人使用移动的设备浏览互联网，具有响应性的设计是必不可少的。

It allows your website to look and function well on small screens, making it accessible to a broader audience and potentially boosting mobile traffic.

它可以让你的网站在小屏幕上看起来和运行良好，使它可以被更广泛的受众访问，并可能增加移动的流量。

3.SEO Benefits

Search engines like Google prioritize mobile-friendly websites in their search results.

像谷歌这样的搜索引擎在搜索结果中优先考虑移动友好的网站。

A responsive design can improve your website’s search engine ranking, leading to more organic traffic.

它可以适应这些变化，而不需要在每次新设备流行时进行完全的重新设计。

4.Future-Proofing

As new devices with various screen sizes and resolutions continue to emerge, responsive design helps future-proof your website

随着各种屏幕尺寸和分辨率的新设备不断涌现，响应式设计有助于您的网站面向未来。

It can adapt to these changes without requiring a complete redesign each time a new device becomes popular.

它可以适应这些变化，而不需要在每次新设备流行时进行完全的重新设计。

5.Positive Brand Image

A well-designed, responsive website reflects positively on your brand.

一个设计良好、响应迅速的网站会对你的品牌产生积极的影响

It demonstrates that you care about providing a good experience for your audience, which can improve your brand’s reputation and credibility.

它表明你关心为你的受众提供良好的体验，这可以提高你的品牌的声誉和可信度。

This are some reasons why you website should be responsive.

这就是为什么你的网站应该响应的一些原因。

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.

Tailwind CSS是一个流行的实用程序优先的CSS框架，它简化和简化了构建现代和响应式Web设计的过程。

Tailwind CSS is an open source CSS framework.

Tailwind CSS是一个开源的CSS框架。

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.

Tailwind CSS已经越来越受欢迎，因为它允许开发人员快速构建和扩展Web设计，而无需编写自定义CSS，从而导致更多的维护和一致的代码库。

Tailwind CSS is a highly customizable, low-level CSS framework.

Tailwind CSS是一个高度可定制的低级CSS框架。

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.

你可以去他们的网站了解更多关于他们的安装，他们的文档和一切。文档写得很好，它解决了几乎所有的查询。

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://tailwindcss.com/

Lets Start our responsive Journey with Tailwind CSS in this we will learn how to use it and what are the features provided.

让我们开始我们的响应之旅与Tailwind CSS在这一点上，我们将学习如何使用它，以及提供了什么功能。

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.

我将使用一个react应用程序，正如我们所讨论的。因此，创建一个react项目或使用一个你已经在做的项目。通过使用npm或你喜欢的包管理器安装它，在你的react应用程序中添加顺风。

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.

默认情况下，Tailwind使用移动的第一断点系统，这意味着您首先创建移动的设计，然后可以使用断点针对较大的显示器。

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.

为了使网站响应，我们需要使用媒体查询，即 '@media’ 沿着与min-width或max-width参数。但是当我们使用Tailwind CSS的力量来帮助我们进行响应式设计时，我们不想写媒体查询，Tailwind为我们做了这件事。

There 5 Breakpoints available by default

默认情况下有5个断点可用

This breakpoints are min-width breakpoints i.e. it will take effect only when it crosses the threshold value in pixels.

此断点是最小宽度断点，即只有当它超过阈值（以像素为单位）时才会生效。

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.

因此，'sm'将针对宽度超过640px的设备，'md'将针对宽度超过768px的设备，依此类推。

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.

如果我们一起定义了 sm 和 md 断点，那么在640px到767px之间将考虑 sm 的值，并且当像素值上升超过767px时， sm 值将被 md 值覆盖，依此类推。

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.

要使用这个断点，我们只需要添加所需的断点名称作为前缀，后跟一个'：'，这将向该元素添加断点。

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

In Tailwind every utilities need their own breakpoints separately.

在Tailwind中，每个实用程序都需要单独的断点。

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

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.

我们可以创建一个断点范围，即从这个像素范围到那个像素范围，它应该应用定义的或附加的属性。

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.

要使用断点范围，我们只需要添加max-后跟预定义的断点名称，它可以是' lg '，' xl '等，后跟'：'，然后是属性。

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

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.

我们可以更改预定义的断点值，也可以通过在tailwind.js.js文件中定义它来定义我们自己的新断点。

If we want to change the definition we need to do it in the theme object value.

如果我们想改变定义，我们需要在主题对象值中进行。

If we want to change the whole predefined value we can override the predefined value by adding the style object inside the theme.

如果我们想改变整个预定义的值，我们可以通过在主题中添加样式对象来覆盖预定义的值。

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
  screens:{
   tablet:"690px",
  },
    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.

通过添加屏幕，我们告诉Tailwind使用这个屏幕选项，而不是默认的。在定义这个之后，我们不能使用默认的，因为默认的已经被屏幕定义覆盖了。

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.

如果我们只需要更新值，我们不希望整个屏幕的值被覆盖，我们可以使用扩展来定义值。

We will define the screens object inside the extend object and then we will add the definition that we want to add.

我们将在扩展对象中定义screens对象，然后添加我们想要添加的定义。

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
   screens:{
     md:"800px",
  },
 },
  },
  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.

在上面的例子中，我已经将 md 断点的值更新为800 px，而不是默认像素。通过使用扩展，我们可以添加新值或更改默认值，而不会影响整个屏幕的默认值。

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.

如果需要的话，我们还可以在主题中添加最大宽度断点。但默认情况下，Tailwind是为最小宽度值编程的，为了使其成为最大宽度，我们需要以对象的形式添加值，其中包含键为 max ，值为'1200 px'像素。

//tailwind.config.js

/** @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.

通过这种方式，您可以将最大宽度查询添加到您自己的项目中。

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.

我们也可以在主题对象中定义固定范围的断点，这样我们就可以在项目中的任何地方使用它。为此，我们将定义一个值对象，它将包含#0 #和#1 #值沿着像素范围。

//tailwind.config.js

/** @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.

如果我们不想经历在主题对象内部创建自定义断点的所有麻烦。我们可以使用 min 或 max 修饰符来使用任意值动态生成自定义断点。

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

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.

通过这种方式，我们不需要在tailwind配置文件中定义断点。当我们不希望这个断点被其他组件使用时，这是很有用的。

Key Points :

Don’t use sm: to target mobile devices.

不要使用#0 #来定位移动的设备。

Use unprefixed utilities to target mobile, and override them at larger breakpoints.

使用无前缀的实用程序来定位移动的，并在较大的断点处覆盖它们。

Example:

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

Let the bg-black be the mobile version and then use the breakpoints for larger screens.

让 bg-black 是移动的版本，然后使用更大屏幕的断点。