css模块化？scope？ css in js?在我看来都不行，tailwindcss才是最好的方案。简单的说几个理由

在我看来都不行，tailwindcss才是最好的方案。简单的说几个理由

react中没有vue中scope的概念，由此可能会导致css冲突

使用css module方式限制其生效范围，由此带来的小问题是，需要额外引入type插件、打包后的css文件可能会增加，
css in js，使css只在本组件内生效，此方案写起来太麻烦，同时增加了生成后的css代码量
使用tailwind大量减少css抽象，即可大幅度降低css冲突的可能性，同时减小css文件体积，并且可以更好的和设计师配合，由此带来的问题是className的增多，至于是降低了可读性还是增加了可读性，还不好下定论

类似dawer和modal组件会依附在body上，使用css不方便管理。例如以下代码

html

<body>
    <div class='container'>
        <dawer className='dawer'>
        </dawer>
    </div>
</body>

.cotnaier .dawer{
    border:1px solid #000;
}

经过代码编译后，dawer实际上是body的一级子节点，因此上述的css就不起作用了，不妨使用tailwind直接添加样式会更简单。如下

html

<body>
    <div>
        <dawer className='m-6 p-10'>
        </dawer>
    </div>
</body>

当然你可能会说vue中的deep解决方案，在我看来不过是猴子戏法而已

提取组件时，往往需要将其附带的css一起提取出去，这个css可能在别的地方使用，因此给提取组件带来了额外的工作量。在这个问题上，tailwind相对css module更有优势