小程序css有变量吗?_带有CSS变量的TailwindCSS

小程序css有变量吗?

TailwindCSS allows us to use pre-defined classes instead of defining our CSS styles. In this article, we will go over how we can use Custom properties (sometimes referred to as CSS variables or cascading variables) with TailwindCSS.

TailwindCSS允许我们使用预定义的类，而不是定义CSS样式。 在本文中，我们将介绍如何在TailwindCSS中使用自定义属性(有时称为CSS变量或级联变量)。

建立 (Setup)

First, follow the installation guide found here. This will show you how you can add TailwindCSS to your current project. For part 2 I will assume you called your CSS file global.css. This is the file that contains @tailwind base; etc.

首先，请按照此处的安装指南进行操作。 这将向您展示如何将TailwindCSS添加到当前项目。 对于第2部分，我假设您将CSS文件global.css 。 这是包含@tailwind base;的文件@tailwind base; 等等

global.css (global.css)

First, we need to edit our TailwindCSS file so it looks something like this:

首先，我们需要编辑TailwindCSS文件，使其看起来像这样：

@tailwind base;
@tailwind components;
@tailwind utilities;
.root,
#root,
#docs-root
  --primary: #367ee9;
  --secondary: #a0aec0;
  --accent: #718096;
  --background: #fff;
  --main: #0d0106;
  --header: #2d3748;
}

I wrap my entire body in an element with class root or id root, so that any of my elements can access it later.

我将整个主体包装在具有类root或id root的元素中，以便我以后的任何元素都可以访问它。

gatsby-browser.js(可选) (gatsby-browser.js (optional))

If you’re using Gatsby, you can add the following to your gatsby-browser.js file:

如果您使用的是Gatsby，则可以将以下内容添加到gatsby-browser.js文件中：

export const wrapRootElement = ({ element }) => (
  <div className="root overflow-hidden">{element}</div>
);

This will wrap all of our pages in the class root and overflow-hidden CSS class from TailwindCSS.

这会将我们所有页面包装在TailwindCSS的类root和overflow-hidden CSS类中。

tailwind.config.js (tailwind.config.js)

Now we’ve defined some CSS variables how can we use them with Tailwindcss? Simple, we update our tailwind config file with some of the new CSS variables. Here we simply want to extend the config to add new colour values.

现在我们定义了一些CSS变量，如何将它们与Tailwindcss一起使用？ 很简单，我们使用一些新CSS变量更新了我们的tailwind配置文件。 在这里，我们只是想扩展配置以添加新的颜色值。

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "var(--primary)",
        secondary: "var(--secondary)",
        main: "var(--main)",
        background: "var(--background)",
        header: "var(--header)",
        accent: "var(--accent)",
      },
    },
  },
};

The syntax is very similar to how we would use the variables normally with CSS where it would normally look like:

语法非常类似于我们通常在CSS中使用变量的方式，通常看起来像这样：

element {
  background-color: var(--primary);
}

Logo.tsx (Logo.tsx)

Now how do we use our variable? Again pretty straight forward just like our normal tailwind classes. Let’s imagine we have a React component called Logo.tsx, defined like so:

现在我们如何使用变量？ 再次像我们正常的顺风飞行班一样，非常简单。 假设我们有一个名为Logo.tsx的React组件，其定义如下：

import React from "react";
import tw from "twin.macro";
export interface Props {
  /** The size of the main text  */
  size?: string;
}
const Logo = ({ size = "2xl" }: Props) => (
  <LogoContainer className={` md:text-${size}`}>
    <Tag>&lt;</Tag>
    Haseeb
    <Tag>/&gt;</Tag>
  </LogoContainer>
);
const LogoContainer = tw.div`cursor-pointer font-header tracking-wide text-2xl font-bold hover:text-primary`;
const Tag = tw.span`text-accent`;
export default Logo;

INFO: I’m using the twin.macro the library so we can use it with CSS-in-JS.

信息：我正在使用twin.macro库，因此我们可以将其与CSS-in-JS一起使用。

To use our variables we just use them like: text-primary. Which will use the value we defined above, #367ee9. Now if we change the value in the global.css file, it will automatically change here as well.

要使用我们的变量，我们只需要像这样使用它们： text-primary 。 它将使用我们上面定义的值#367ee9 。 现在，如果我们更改global.css文件中的值，它也会在此处自动更改。

暗/亮模式(可选) (Dark/Light Mode (Optional))

This can be easily extended to add a dark/light mode. Add the following to the global.css file like so:

这可以轻松扩展以添加暗/亮模式。 将以下global.css添加到global.css文件中：

.theme-light {
  --background: #fff;
  --main: #0d0106;
  --header: #2d3748;
}
.theme-dark {
  --background: #0e141b;
  --main: #ffffff;
  --header: #eaeaea;
}

We can use a theme context to get the current theme I’ve written about here. We get the current theme then use that to determine which class to set. This will then change value of the variables. If the theme changes, the variable values will change dark -> light or light -> dark etc.

我们可以使用主题上下文来获取我在此处编写的当前主题。 我们得到当前主题，然后使用它来确定要设置的类。 然后，这将更改变量的值。 如果主题更改，则变量值将更改为深色->浅色或浅色->深色等。

const { theme } = useContext(ThemeContext);
// ...
return (
  <div
    className={`${
      theme === "light" ? "theme-light" : "theme-dark"
    } bg-background`}
  >
    // ...
  </div>
);

That’s it! We’ve learnt how to use CSS variables with TailwindCSS.

而已！ 我们已经学习了如何在TailwindCSS中使用CSS变量。

附录 (Appendix)

• Example Project

  示例项目

• Icons from FlatIcon

  FlatIcon的图标

翻译自: https://medium.com/@hmajid2301/tailwindcss-with-css-variables-513abe2e9a5

小程序css有变量吗?