TailwindCss的使用

1.可以直接使用vue ui来快速创建应用和安装TailwindCss包,省去自己手动创建和导入的步骤

TailwindCss的使用_第1张图片
TailwindCss的使用_第2张图片

2.当tailwind.config.js里面的配置内容没有的时候,用npx tailwind init --full 来初始化样式;注意!要把原来的tailwind.config.js删除,否则会有已经存在的提示!

3.直接对着文档导入样式就可以

在这里插入图片描述
TailwindCss的使用_第3张图片

4.(bg-{color}) bg-black可以直接设置背景颜色TailwindCss的使用_第4张图片

需要什么颜色可以自行配置,其它同理
TailwindCss的使用_第5张图片
TailwindCss的使用_第6张图片

简单使用
  • 文本字体、颜色、定位…总之对应这文档和配置来找即可!

TailwindCss的使用_第7张图片
TailwindCss的使用_第8张图片

rem高度计算—spacing,设置10px为0.25rem;主要是要在html,body,#app中设置font-size;比如font-size:10px,那么就等于1rem,200px就是20rem以此类推。

TailwindCss的使用_第9张图片

总结!初次尝试之后就爱上了这门css框架。

你可能感兴趣的:(css)