tailwindcss构建学习过程

Holly1945

已于 2022-06-27 14:49:15 修改

阅读量1.1k

点赞数

分类专栏： css 文章标签： css

于 2022-04-26 14:07:40 首次发布

本文链接：https://blog.csdn.net/Holly1945/article/details/124426490

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

tailwindcss

文档：https://www.tailwindcss.cn/

静态资源cdn 导入：
无法自定义 Tailwind 默认主题
不能使用任何指令，如： @apply， @variants 等等
无法启用更多的变体，如： group-focus
无法下载第三方的插件
您法 tree-shake 未使用到的 Styles

Tailwindcss 集成到你的构建过程中
npm i tailwindcss@latest postcss@latest

npx tailwindcss init
tailwind.config.js
tailwind 自定义配置文件

module.exports = {
  content: ['./src/**/*.{html,js,vue}'],
  theme: {
    colors: {
      blue: '#00f',
      purple: '#7e5bef'
    },
    textColor: {
      info: '#909399',
      success: '#67C23A',
      warning: '#E6A23C',
      danger: '#F56C6C',
      // promary: '#409EFF',

      primaryText: '#303133',
      regular: '#606266',
      secondaryText: '#909399',
      placeholderText: '#C0C4CC'
    }
  },
  plugins: []
}

postcss.config.js
postcss 配置文件

module.exports = {
  plugins: [
    require('postcss-preset-env'),
    require('tailwindcss')
    // require('autoprefixer')
  ]
}

创建css文件

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

在main.js 等入口导入样式
不能继承导入

import './assets/styles/tailwindcss.css'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/styles/index.css'

注意： elementui css 与tailwindcss 会冲突比如在按钮样式上
需要在element ui样式前引入不要覆盖element ui的样式

webpack.config.js

{
  test: /\.css$/i,
  use: [
    MiniCssExtractPlugin.loader, // style-loader
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1
      }
    },
    'postcss-loader'
  ]
}


// MiniCssExtractPlugin css分离
plugins: [
   new MiniCssExtractPlugin({
      filename: 'styles/[name].[fullhash:6].css',
      chunkFilename: 'styles/[id].[chunkhash:6].css'
    })
]

new MiniCssExtractPlugin({
  filename: 'styles/[name].css',
  chunkFilename: 'styles/[id].css'
}),



// 生产环境优化：css 压缩
optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin()
    ],
}