参考连接是: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'],
}
}
}