安装 Install

CSS: Framework 框架: Tailwind CSS 安装 Install
Categories:
Tags:

安装

在专案下面使用 npm 即可安装 tailwind 套件，即可立即使用 tailwind 语法开始开发

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npm install postcss-import --save-dev

建立设定档案

在专案下建立 tailwind 设定档案 tailwind.config.js，tailwind 会根据客製化设定档案状况去产生出对应的 css

npx tailwindcss init

在后方指令加入 --full 即可输出完整设定档案，可以直接建立完整的设定档案，再从中去修改自己需要的部分，减少需要不断地查找可设定的时间

npx tailwindcss init --full

建立 tailwind.css

在专案目录下建立 tailwind.css，并载入 tailwind css 相关元件

/* ./src/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

输出 tailwind.css

npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css

npx tailwindcss -o tailwind.css

建立 postcss 设定档案

在专案目录下建立 postcss.config.js 档案，则使用 postcss 输出 css 时则会针对这个设定档案去输出 css

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),    
    require('autoprefixer'),
    require('postcss-100vh-fix'),
  ]
}

使用 postcss 输出 tailwind.css

在输出时加入 --postcss 参数即可使用 postcss 输出 css

npx tailwindcss --postcss -o tailwind.css

输出 Production minify css

npx tailwindcss -o build.css --minify

参考资料