如何自定义TailwindCSS美化网站提供独特的外观？

2021年11月28日05:34:05 发表评论 1,263 次浏览

前端开发令人着迷，不仅因为你可以创造神奇的体验，并且可以非常有形地看到你的工作成果，还因为可用于构建 UI 的选项非常多。

如何美化网站？我们经常面临从出色的 JavaScript 框架和 CSS 或视觉设计框架中挑选的决定，这些框架变得非常复杂，以至于它们有自己的学习曲线。

在像bootstrap这样的框架取得巨大成功之后 ，趋势已经确定，框架的竞争非常激烈，CSS 每次都被更多地抽象为组件、规则以及这些框架创建的任何内容。但是定制是如何发生的呢？在某些情况下使用旧的 CSS 或 SCSS。

但TailwindCSS 与其他框架不同，如何自定义TailwindCSS美化网站？下面开始从最基本的开始谈起——

什么是 Tailwind CSS？

美化网站的方法：使用TailwindCSS。TailwindCSS 打破了其他框架所遵循的范式，回归根源并重新思考我们如何设计 UI。

当 React 出现并提出将“HTML”和 JavaScript 移回一个文件的想法时，每个人都吓坏了，但结果证明这是一件很棒的事情。同样，TailwindCSS 建议通过提供一组不代表自定义组件但代表 CSS 属性的实用程序类，将样式从 CSS 移至“HTML”或 JavaScript 文件，并且它们具有所有类。

等等，什么？我的 CSS 不会很大吗？不会。多亏了 tailwind 处理器，你的最终 CSS（是的，最终，你将拥有一个由 Tailwind 生成的 CSS 文件）将仅由你在项目中使用的那些类组成。

让我们看一个我们过去如何做的例子，以及它如何与 TailwindCSS 一起工作：

<!-- with CSS -->
<style>
.title {
  font-weight: bold;
  color: #333;
  /* ... */
}
</style>

<h4 class=”title”>Good old fashioned title</h4>

<!-- with TailwindCSS -->
<h4 class="font-serif text-4xl leading-normal font-bold text-gray-700">Want to dig deeper into Tailwind?</h4>

如果你像我一样，你会持怀疑态度，但相信我，它是有效的。通过简单地查看代码来理解组件的外观会更好更快。此外，如果你从事中型或大型项目，CSS 类会失控，有诸如“title”或“title2”之类的东西，而且你永远不知道该使用哪个。

另一个好处是称为“预检”的东西，它是一组样式。TailwindCSS 注入在所有浏览器中建立相同的基线，因此在 Safari 中看起来与在 Firefox 或 Chrome 中没有什么不同。

但还有更多。由于 TailwindCSS 是完全可定制的，你可以将样式指南预设到你的配置中并轻松地按照你的指南构建界面，这就是我们今天将更多关注的内容。

我们将制作什么？

TailwindCSS如何美化网站？如前所述，我们将学习如何自定义 TailwindCSS 以独特地查看你的网站和应用程序。为此，我们将构建一个 React 应用程序，演示如何自定义 Tailwind，尽管相同的概念将适用于任何其他框架或非框架网站。

如果你对 Tailwind 有一定的使用经验，你就会从示例中识别出它使用一种预设颜色和字体的独特设计。如果你尝试构建时事通讯注册表单，它可能看起来像这样：

原创 TailwindCSS 设计
原创 TailwindCSS 设计

但是我们的设计师不想使用任何给定的颜色，他们想要自定义按钮、输入和字体的形状，我们最终制作的设计如下所示：

不确定是否更好，但设计师可能更了解。

全新改进设计
全新改进设计

设置你的应用程序

美化网站的方法：对于 CSS 框架来说，设置 TailwindCSS 似乎有点复杂，但请记住，它远不止于此。有意义的是，Tailwind 需要了解你的项目，你使用哪些类来优化构建大小。这些类可以在 JSON 文件、React 组件、VueJS 的东西中，所以它必须非常聪明并且有一些特殊的访问权限。

我不会让你厌烦如何设置它的细节。这不是超级复杂，但它确实需要你遵循一些步骤，并且在他们的网站上都有很好的记录。它们还提供了多个框架的说明。

如果你不知道如何，请查看官方安装指南 ，启动并运行项目，然后返回此处继续。

使用默认样式构建表单

如何自定义TailwindCSS美化网站？我们不会在这里花太多时间，我们正在构建一个只有一个输入和一个按钮的简单表单，但我们基本设计的最终代码如下：

return (
   <div className='App' style={{ marginTop: '50%' }}>
     <form className='text-lg'>
       <input
         className='p-4 mr-2 border font-medium rounded-md border-purple-600 outline-none'
         placeholder='Enter your mail'
       />
       <button
         className='py-4 px-6 rounded-md text-white font-medium rounded-lg bg-purple-600 hover:bg-purple-700 outline-none'
         type='submit'
       >
         Sign up
       </button>
     </form>
   </div>
 );

之后，你应该会在你的网站上看到类似的内容：

如何自定义TailwindCSS美化网站提供独特的外观？
原创设计演示

如何美化网站：自定义样式

虽然上面的形式看起来很不错，但如果你的设计师在他们自己的一组设计系统之间使用新的调色板、间距变化和字体系列更新，该怎么办？

这就是 Tailwind 闪耀的地方。你可以在几行中更改提供给你的默认样式的几乎所有方面，这也并不复杂。只需要对配置文件进行一些更改，就可以了！令人兴奋，对吧？让我们开始配置吧！

配置 Tailwind 默认预设

TailwindCSS如何美化网站？转到tailwind.config.js文件。让我们来看看我们开箱即用的每个对象：

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  // ...
}
  • purge ：这用于摇动未使用的样式并优化 Tailwind 项目的最终构建大小。它可以接收要优化的文件名或文件类型数组。最有可能的是，你想要优化以一种或另一种方式使用 Tailwind 的所有文件或组件。这是一个常见的例子：
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html']
  • darkMode ：Tailwind 包含一个深色变体，可让你在启用深色模式时以不同的方式设置网站样式。我们可以简单地将“media”作为其值来开始使用暗模式实用程序类。
module.exports = {
  darkMode: 'media',
  // ...
}
  • 主题 ：你可以在此处定义项目的调色板、类型比例、字体、断点、边框半径值等。基本上，这是定制的所有细节实际发生的地方。它也可以有子对象，如屏幕 、颜色 、间距 等。这是一个例子：
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

还有更多选项，但我们将跳过它们，因为它们不在当前讨论范围内。我们的主要对象是主题部分。

假设我们在表单元素中进行了以下更改：

  1. 将颜色更新为：#FF4F71（玫瑰红）、#C40429（深玫瑰红）和 #FBFBFB（玫瑰白）。
  2. 将字体系列更改为Kalam 。
  3. 添加两个新的边框半径，分别为 1rem（基数）和 5rem（更大）。
  4. 边距或填充的新间距应为 1rem（基数）和 1.5rem（更大）

如何自定义TailwindCSS美化网站？现在我们的任务是将这些更改应用于现有的 React 应用程序。那么我们从哪里开始呢？是的，就在 Tailwind 配置文件中！

我们与扩展主题选项colors，fontFamily，extend和spacing对象，并传递各自的值。

  1. 在颜色对象上，我们可以通过参考名称roseRed（如（#FF4F71）、darkRoseRed（#C40429）和roseWhite（#FBFBFB）以及它们的十六进制值来定义我们需要的三种新颜色。这看起来像：
colors: {
    roseRed: '#FF4F71',
    darkRoseRed: '#C40429',
    roseWhite: '#FBFBFB',
},

现在，每当我们想用一个特定的颜色，我们可以只使用这些名称而不是十六进制代码作为一个实用工具类backgroundColor，borderColor，textColor，等。

  1. 接下来，要使用新的字体系列，我们首先需要 从 Google Fonts获取@import：
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&display=swap');

这应该添加到 index.css 的顶部，我们在下面导入了 Tailwind 基本样式。然后，我们创建一个新fontFamily对象：

fontFamily: {
    fontHandwritten: 'Kalam',
},

在这里，我们给 Kalam 字体一个替代名称，fontHandwritten我们将在我们的标记中使用它。

  1. 为了保留主题选项的默认值并添加新的自定义值，我们可以 在对象的扩展键下添加所有扩展theme。我们可以这样做来扩展边界半径。因此，我们使用borderRadius具有我们在设计更改中获得的两个值的对象：
borderRadius: {
    borderBase: '1rem',
    borderBig: '5rem',
},
  1. 最后，对于元素之间的间距，我们有spacing自定义全局大小比例的关键：
spacing: {
    spaceNatural: '1rem',
    spaceNaturalPlus: '1.5rem',
},

因此我们的整个tailwind.config.js文件现在看起来像：

module.exports = {
 purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
 darkMode: false, // or 'media' or 'class'
 variants: {
   extend: {},
 },
 plugins: [],
 theme: {
   colors: {
     roseRed: '#FF4F71',
     darkRoseRed: '#C40429',
     roseWhite: '#FBFBFB',
   },
   fontFamily: {
     fontHandwritten: 'Kalam',
   },
   extend: {
     borderRadius: {
       borderBase: '1rem',
       borderBig: '5rem',
     },
   },
   spacing: {
     spaceNatural: '1rem',
     spaceNaturalPlus: '1.5rem',
   },
 },
};

更新我们的标记

如何美化网站？现在让我们伸展一些腿，让我们更新输入表单组件的 JSX 标记，以根据配置更改应用最新的更改。

转到 app.js 文件，现在我们可以使用我们的自定义实用程序类，如下所示：

  1. 在<form>我们添加的标签上font-fontHandwritten，将 Kalam 字体系列应用于整个表单。
  2. 填充类更新p-spaceNatural为小填充值 (1rem) 和px-spaceNaturalPlus更大 (1.5rem)。
  3. 保证金价值也是如此。我们现在有mr-spaceNatural而不是mr-2.
  4. 至于边框和颜色。为了根据我们的设计系统增加新的边框半径，我们rounded-borderBase在输入和按钮中使用。然后，对于#C40429 彩色边框，我们也border-darkRoseRed可以将其应用于输入中的文本text-darkRoseRed。
  5. 该按钮rounded-borderBig bg-roseRed hover:bg-darkRoseRed在悬停时分别获得更大的圆角半径、红色背景颜色和更暗的类别。

美化网站的方法：这是更新后的 JSX 标记的完整代码：

import './App.css';

function App() {
 return (
   <div className='App text-lg' style={{ marginTop: '50%' }}>
     <form className='text-lg font-fontHandwritten'>
       <input
         className='p-spaceNatural mr-spaceNatural border rounded-borderBase border-darkRoseRed text-darkRoseRed outline-none'
         placeholder='Enter your mail'
       />
       <button className='py-spaceNatural px-spaceNaturalPlus rounded-borderBase text-roseWhite font-bold rounded-borderBig bg-roseRed hover:bg-darkRoseRed outline-none'>
         Sign up
       </button>
     </form>
   </div>
 );
}

export default App;

这将使你获得所需的结果：

如何自定义TailwindCSS美化网站提供独特的外观？
TailwindCSS如何美化网站：最终设计演示

结论

你现在拥有相同的表单元素，但具有完全不同的样式，使其从通常的 Tailwind 样式中脱颖而出。

如何自定义TailwindCSS美化网站？在本文中，我们从了解 Tailwind CSS 是如何帮助前端开发人员使用其独特的功能（如低级实用程序类）以及如何使用它们来设置基本内容（如文本）样式的快速演示。

接下来，我们开始使用 Tailwind 的默认样式构建一个简单的表单元素，以了解在我们的 React 应用程序中使用它以及设置和安装的要点。然后我们深入研究了配置文件，将其配置为与设计系统更改相匹配，并使用自定义样式更新了我们的代码。

谢谢阅读！

木子山

发表评论

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