Next.js tailwindcss 总结

130 阅读1分钟

前端设计稿

安装homebrew

/bin/zsh -c "$(curl -fsSL gitee.com/cunkai/Home…)"

安装成功后,以后安装软件,只需要 brew install --cask (node) brew install --cask visual-studio-code

移动端:750px1624px ipad:7681024 PC:1920*1080

package.json配置ESModule的配置

"type":"module"

tailwindcss 配置完整的css文件

npx tailwindcss init -p --full

翻译插件 Trancy

打包

npm run build

查看打包后的文件

npm start

轮播

github.com/Chocolate19…

Image 隐藏/显示

<image className="block md:hidden"/> // 移动端显示,PC端隐藏 
<image className="hidden md:block"/> // 移动端隐藏,PC端显示

react-slick

  • 设置图片的自适应 在React中使用react-slick库时,如果你想设置图片的自适应高度,你可以通过设置slidesToShowslidesToScroll属性来实现。此外,确保variableWidth属性被设置为true以允许各个滑块有不同的宽度。

css 样式

outline:none. //表示使outline属性无效,使绘制于元素周围的一条线无效。

©2024 === ©2024