有效地将windcss与nuxt一起使用-DEV365 开发者社区

在这篇文章中，我们将在官方的NUXT模块的帮助下，有效地使用NUXT应用程序使用parwindcss。我们还将看到如何直接使用tailwindcs而不是图像或SVG图标使用SVG图标，以及如何根据给定的图像为TailWincss构建我们的自定义调色板。

表中的内容

Table of Content
Prerequisites
Setting up TailwindCSS with Nuxt
- Configuring TailwindCSS using koude0
- Loading TailwindCSS styles
Using SVG Icons with TailwindCSS
Generate a custom color palette for TailwindCSS
Summary

先决条件

最好通过使用以下命令设置NUXT应用程序并准备好使用：

npx nuxi init tailwind-css-nuxt-demo

哪个tailwind-css-nuxt-demo是我们代码演示应用程序的名称。您可以根据自己的喜好更改为任何名称。

如果您对TailwindCSS和Nuxt.js的工作方式也有基本的了解，这将有所帮助。

用nuxt设置parwindcss

要开始使用NUXT使用tailwindcss，您可以按照TailwindCSS website上的说明进行安装和配置tailwindcss作为依赖关系。或者，您可以按照以下命令使用官方Nuxt TailwindCSS module：

yarn add -d @nuxtjs/tailwindcss

然后将模块添加到nuxt.config.ts的modules部分：

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss']
})

您准备使用parwindcss。但是，在开始使用它之前，我们需要进行其他工作以确保parwindcss运行顺利。

使用`tailwind.config.ts`配置parwindcss

我们需要根据需要配置parwindcss。为此，我们在项目的根部创建一个tailwind.config.ts文件（大多数情况下，它应该与nuxt.config.ts相同），并使用以下代码：

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
  purge: {}
}

让我们查看此文件中定义的属性：

theme-在设置所有项目的其他自定义主题，包括调色板，字体系列，断点，边框，最小/最大尺寸等。我们可以覆盖默认主题或使用theme.extend属性进行默认主题。
variants-我们在其中定义了一系列响应式和伪级变体，用于选定的核心实用程序插件，例如appearance，borderColor，outline或outline或zIndex，等等。
plugins- JavaScript功能集合，允许我们以编程方式注册其他样式。
purge-可以是一个数组，对象或布尔值，指示我们要如何删除未使用的样式（或不）。 tailWindCSS的NUXT模块会自动添加所需的代码，以启用生产过程中清除CSS代码的代码，然后是对任何使用名称的使用过的CSS样式引用的文件列表，如下所示：

purge: {
    //enable remove unused CSS only in production
    enabled: process.env.NODE_ENV === 'production',
    //any file containing the reference of CSS styles by class name.
    content: [
        'components/**/*.vue',
        'layouts/**/*.vue',
        'pages/**/*.vue',
        'plugins/**/*.js',
        'nuxt.config.js'
      ]
    }

并且由于我们的配置文件位于打字稿中，因此NUXT引擎在运行应用程序时将无法找到它。我们需要通过将以下代码添加到您的NUXT配置对象：
来指定该文件的路径。

  tailwindcss: {
    configPath: '~/tailwind.config.ts'
  },

现在，我们配置了parwindcss。接下来，我们需要将内置的parwindcss样式加载到我们的应用程序中。

加载parwindcss样式

默认情况下，NUXT tailwindcss模块将将tailwindcss样式从./assets/css/tailwind.css定位到应用程序中。我们还可以使用NUXT配置文件中的tailwindcss配置对象的cssPath属性覆盖此默认路径。

  tailwindcss: {
    cssPath: '~/styles/tailwind.css'
  },

和在styles/tailwind.css文件中，我们可以使用关键字@tailwind导入parwindcss类样式，如下：

@tailwind base;
@tailwind components;
@tailwind utilities;

在上面的代码中，我们导入base，components和utilities样式，是：

base样式是核心样式。
components样式适用于特定于组件的。
utilities样式适用于填充，保证金等公用事业

就是这样。运行应用程序时，NUXT会在里面加载尾windcss，为您提供自定义应用程序的外观和感觉！

接下来，让我们看看如何利用taiwindcss在应用程序中构建和使用图标，而不是直接使用图像或SVG图标的经典方式。

将SVG图标与parwindcss一起使用

在应用程序中使用SVG图标是一种常见的做法。有了正确的图标，我们可以为用户提供出色的用户体验，并使应用程序更具吸引力和吸引人。但是，使用SVG图标有挑战，例如手动创建和保存SVG文件在应用程序目录中或创建组件以动态加载SVG图标等的努力。此外，选择要使用的合适的图标包可能是一个挑战。

我最喜欢的图标来源之一是Iconify，由Egoist制造，包含大量免费图标集合，例如材料设计，字体真棒等，您可以按名称或类别搜索图标。

我们可以从网站上显示的每个图标中选择从VUE组件和React组件到一个简单的SVG文件。

您可以下载所需图标的相关摘要代码，然后将其复制并粘贴到您的应用程序中。但是，当您的应用程序需要许多图标时，这种方法可能很乏味。您可以使用tailwindcss-icons软件包解决此类问题。此出色的软件包使您可以从Iconify从Iconify加载图标到您的tailwindcss作为用于应用程序的类。

要开始使用tailwindcss-icons，我们需要将其作为依赖项安装：

yarn add -D @egoist/tailwindcss-icons

该软件包揭示了一种称为iconsPlugin的方法，以生成用于TailWindCSS配置的图标包插件。此方法接受包含要在应用程序中使用的图标包装数组的集合对象，如下所示：

//**tailwindcss.config.ts */
module.exports = {
    plugins: [
        iconsPlugin({
          // Select the icon collections you want to use
          collections: 
            { 
                // collections of icons
            },
        }),
      ],
}

要生成图标包的集合，我们可以使用getIconCollections的方法，该方法接受了按名称（例如mingcute sep seet）的图标包数字，如下所示：

plugins: [
    iconsPlugin({
      collections: getIconCollections(["mingcute"]),
    }),
],

这就是全部。该软件包将按照模式i-<collection_name>-<icon_name>生成每个图标的类。例如，我们希望来自Mingcute设置的带有名称palette-2-line的调色板图标，如以下屏幕截图所示：

为此

    <span class="i-mingcute-palette-2-line text-sea-buckthorn-500 text-2xl" aria-hidden="true" />        
    <span>Some text</span>

浏览器将显示我们的图标如下：

最好的部分是，您无需手动创建和保存SVG文件或创建组件以动态加载SVG图标。您需要安装和配置软件包，然后准备就绪！

太好了，对吗？让我们看看如何使用parwindcss为应用程序构建自定义调色板。

生成一个定制的调色板，用于tailwindcss

tailwindcss带有一组默认的调色板，但是我们还可以使用tailwind.config.ts文件中的theme.extend.colors字段提供自定义调色板，如下：

module.exports = {
  theme: {
    extend: {
      colors: {

      },
    }
  },
}

colors是一个对象集合，每个键是一个调色板名称，每个值是[键，值]的对象，其中键是颜色的阴影（通常从50到900），值为值是颜色代码。例如，以下代码定义了一个名为sea-buckthorn的调色板，阴影为50至900，每个阴影的颜色代码：

module.exports = {
  theme: {
    extend: {
      colors: {
        'sea-buckthorn': {
            50: '#FEFAF4',
            100: '#FEF6E9',
            200: '#FCE8C8',
            300: '#FBDBA7',
            400: '#F7BF66',
            500: '#F4A424',
            600: '#DC9420',
            700: '#926216',
            800: '#6E4A10',
            900: '#49310B',
        },
      }
    }
);

通过定义调色板，我们可以在应用程序中使用它，以遵循语法bg-<color_name>-<shade>的背景颜色或文本颜色的text-<color_name>-<shade，例如bg-sea-buckthorn-500和text-sea-buckthorn-500。

。

这是真正的挑战。我们如何决定每个颜色主题的阴影？从基于某些颜色理论手动计算阴影或使用外部工具为我们执行相同的任务，有很多方法可以做到这一点。

这样的工具是使用Color Palette Generator从给定图像中生成调色板。

该工具允许我们上传图像，它将以尾随的格式生成四个主要调色板及其阴影，如以下屏幕截图所示：

全部剩下的就是将生成的代码复制并粘贴到tailwind.config.ts文件中，您可以在应用程序中使用调色板。

概括

在本教程中，我们学会了如何在NUXT.JS应用程序中安装和配置parwindcss。我们还学会了如何将图标注入与tailwindcss-icons一起用作TailWindCSS类，以及如何使用外部工具快速轻松地为TailWindCSS生成自定义调色板。这些肯定是您对parwindcss的次要方面，以及它可以为您的NUXT应用程序提供的内容。如果您还有其他用于与NUXT一起使用parwindcss的提示，请在评论部分与我分享！

ð如果您想赶上我有时候，请在Twitter上关注我| Facebook。

ð通过我的新书Learning Vue了解Vue。早期版本现在可以使用！

喜欢这篇文章还是发现它有帮助？分享ðð¼ð