tailwind css 教程

参考连接是：https://tailwindcss.com/docs

首先安装nodejs.

然后安装package json ， cd 到 你的文件夹，然后输入npm init -y

这样会创建package.json 文件。

然后输入npm i tailwindcss 来安装tailwind, 注意这里输入的是tailwindcss。

然后要添加tailwind到项目的style.css文件。

/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

创建一个文件夹src.

src里面创建文件style.css，然后粘贴上面的内容到里面。

然后我们要通过npm build命令来添加进这些css。

创建一个dist文件夹，来发布网站内容。在dist文件夹里创建index.html，然后创建style.css文件。

然后打开package.json文件。在scripts执行脚本里面添加”build:css”: “tailwind build src/style.css -o dist/style.css”。

然后在命令那里执行 npm run build:css.

这样就会执行编辑tailwindcss到dist的style.css文件里。

要修改tailwind的配置，要在npm里安装 npx tailwind init. 然后会 创建tailwind.config.js文件。就可以编辑自定义的样式

// Example `tailwind.config.js` file
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    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',
      }
    }
  },
  variants: {
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  }
}