vue3_css,style新特性 以及 css样式框架Tailwind CSS

一、css,style新特性

1.:deep() 

写vue3+elementPlus项目时，发现会报一个警告

[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead

 是因为>>>和/deep/已被弃用，要用:deep()代替

//会报警告的写法
/deep/ .el-selected{
    background: #ddd;
}
//正确写法
:deep(.el-selected){
    background: #ddd;
}

2.插槽选择器

//父组件
<!--
 * new page
 * @author: luoyuanyuan
 * @since: 2023-05-30
 * index.vue
-->
<template>
  <div class="container">
    <A>
       <div class="a">
        我是插槽
       </div>
    </A>
  </div>
</template>
<script setup lang="ts">
import A from './A.vue'
</script>
<style scoped>
</style>
//子组件

<template>
  <div class="container">
    <slot></slot>
  </div>
</template>
<style scoped>
:slotted(.a){
    color:red;
    font-size: 30px;
}
</style>

3.全局选择器

在父组件全局选择，子组件的div也会影响到

<style scoped>
:global(div){
    background-color: aqua;
}
</style>

4.动态css

<template>
  <div class="container">
    <p class="bind">v-bind应用于css</p>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const  style = ref({
    color:'pink',
    font:'37px',
    background:'skyblue'
})
</script>

<style scoped>
.bind{
    color:v-bind("style.color");
    font-size: v-bind('style.font');
    background-color: v-bind('style.background');
}
</style>

5.css module

<template>
  <div class="container">

    <!-- <div :class="$style.red"> --> //单个
    <div :class="[yy.red,yy.border]"> //多个的写法
        module
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref,useCssModule} from 'vue'
const css = useCssModule('yy')
console.log(css); //{red: '_red_2jm66_3', border: '_border_2jm66_9'}

</script>

<style module="yy">
    .red{
        color:rgb(255, 50, 0);
    }
    .border{
        border:1px solid #999;
        font-size: 40px;
    }
</style>

二、Tailwind CSS

Tailwind CSS 是一个由js编写的CSS 框架 他是基于postCss 去解析的

详细解释：https://xiaoman.blog.csdn.net/article/details/124951311

vue3中Tailwind的使用：

• 安装Tailwind及其依赖项

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

• 生成配置文件

npx tailwindcss init -p

• 生成配置文件

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 创建tailwind.css文件，并在main.ts中引入

taiwind.css

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

main.ts

import '@/assets/style/tailwind.css'

• 页面中使用

直接写css类名

<div class="text-lg leading-10 line-through bg-orange-600" >
   我是内容
</div>

学习小满zs vue3第三十三章https://xiaoman.blog.csdn.net/article/details/124754590