开始使用 Tailwind 和 React：实现响应能力。

大家好，

在我的上一篇文章中，我通过创建一个简单的登录表单解释了如何开始使用 Tailwind 和 React。在那篇文章中，我们从最基本的表单结构开始。在本文中，我们将使用相同的登录表单并实现响应式功能。

在我们开始之前，这是我们之前开发的表格 -

我们之前开发这个表单时只考虑了桌面版本。但现在有了需求，我们需要让它响应式。上面这个表单的代码如下：


import React from 'react';
import { PrimaryButton } from '../components/FormElements/Button';
import Input from '../components/FormElements/Input';

const Login = () => {
    const handleFormSubmit = (e) => {
        e.preventDefault();

        let email = e.target.elements.email?.value;
        let password = e.target.elements.password?.value;

        console.log(email, password);
    };

    const classes = {
        pageBody: 'h-screen flex bg-gray-bg1',
        formContainer:
            'w-full max-w-md m-auto bg-white rounded-lg border border-primaryBorder shadow-default py-10 px-16',
        formHeading: 'text-2xl font-medium text-primary mt-4 mb-12 text-center',
        btnContainer: 'flex justify-center items-center mt-6',
    };
    return (
        <div className={classes.pageBody}>
            <div className={classes.formContainer}>
                <h1 className={classes.formHeading}>
                    Log in to your account 🔐
                </h1>

                <form onSubmit={handleFormSubmit}>
                    <Input
                        id='email'
                        label='Email'
                        type='email'
                        placeholder='Your email'
                    />
                    <Input
                        id='password'
                        label='Password'
                        type='password'
                        placeholder='Your Password'
                    />

                    <div className={classes.btnContainer}>
                        <PrimaryButton type='submit'>
                            Continue with Email
                        </PrimaryButton>
                    </div>
                </form>
            </div>
        </div>
    );
};

export default Login;

该classes对象包含应用于以下元素的所有类的列表。到目前为止，我们已经非常清楚 Tailwind 是一个以实用程序为先的库，并且它为每个实用程序都提供了一个类。我们将以类似的方式，通过在需要时应用类来实现响应式功能。

对于任何网页，响应式设计都是考虑到浏览器的不同断点来实现的，而 Tailwind 支持相当广泛的屏幕尺寸，足以提升你网站的响应速度。以下是 Tailwind 支持的断点列表：

虽然这个列表看起来足够了，但 Tailwind 通过将断点添加到文件中，为您提供了自定义断点的不同方法tailwind.config.js。

您可以通过两种方式向项目添加自定义断点。1-
覆盖 Tailwind 默认值并完全添加您的自定义断点。2-
扩展 Tailwind 默认值并添加尚未包含在列表中的断点。

对于第一种方法，您可以按如下方式添加断点列表

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

对于第二种方法，你需要添加默认列表中不存在的断点。它看起来会像这样：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px',
      },
    },
  },
  variants: {},
  plugins: [],
}

请注意我们如何在extendtailwind 主题对象的键内添加屏幕列表。

除此之外，Tailwind 还提供了更多断点自定义功能，您可以点击此处阅读。本文不会详细介绍这些功能，因为我认为上述几点对于大多数用例来说已经足够了。

以上就是关于自定义以及 Tailwind 处理响应式的一些基本属性的全部内容。现在，让我们尝试了解它的实际实现。Tailwind 会要求您在开发页面时采用移动优先的原则。在移动优先原则下，我们默认考虑移动设备，并且只更改那些在较大屏幕上具有不同值的属性。

例如，假设移动设备的标题字体大小应为1rem。因此，我们将1rem为其指定默认字体大小，并2.5rem在媒体查询中添加字体大小以适应更大的屏幕。

对于上面的页面，我们只需要考虑表单标题的响应性，因为所有其他元素在移动设备上也同样显示良好。因此，标题目前的字体大小为，text-2xl而对于移动设备，我们希望赋予text-lg。因此，我们将修改标题类，使其看起来像这样 -
text-lg lg:text-2xl font-medium text-primary mt-4 mb-8 lg:mb-12 text-center
注意，我们还更改了底部边距，使其看起来适合移动设备的小字体大小。

这是实现网站响应式设计最简单的方法之一。起初你可能会觉得 Tailwind CSS 比较混乱，因为我们不习惯在 HTML 元素中添加如此庞大的 class 列表，但使用一段时间后，一切就会变得清晰明了。此外，想要了解更多关于 Tailwind 的技巧，可以参阅一篇很棒的文章，作者是

何塞·菲利克斯

React 开发人员热衷于构建简洁的用户界面。

。

这就是关于 Tailwind 响应式设计的全部内容。如果您遵循了其他一些模式，请在评论区分享。我也很想听听您的分享！如果您喜欢我的文章，也可以在Twitter上联系我，或者请我喝杯咖啡。

继续学习:)

链接：https://dev.to/hey_yogini/getting-started-with-tailwind-and-react-implementing-responsiveness-3a

开始使用 Tailwind 和 React：实现响应能力。

开始使用 Tailwind 和 React：实现响应能力。

何塞·菲利克斯跟随

何塞·菲利克斯