tailwind.scss 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. @tailwind base;
  2. @tailwind components;
  3. @tailwind utilities;
  4. @layer utilities {
  5. .ellipsis {
  6. overflow: hidden;
  7. text-overflow: ellipsis;
  8. white-space: nowrap;
  9. }
  10. @for $i from 1 through 10 {
  11. .ellipsis-#{$i} {
  12. overflow: hidden;
  13. text-overflow: ellipsis;
  14. display: -webkit-box;
  15. line-clamp: #{$i};
  16. -webkit-line-clamp: #{$i};
  17. -webkit-box-orient: vertical;
  18. word-break: break-all;
  19. }
  20. }
  21. // 历遍生成4个方向的底部安全区
  22. @each $d in top, right, bottom, left {
  23. .safe-area-inset-#{$d} {
  24. padding-#{$d}: 0;
  25. padding-#{$d}: constant(safe-area-inset-#{$d});
  26. padding-#{$d}: env(safe-area-inset-#{$d});
  27. }
  28. }
  29. .shadow-card {
  30. box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
  31. }
  32. .shadow-card-dark {
  33. box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
  34. }
  35. .border-bottom {
  36. border-bottom: 1px solid #E5E5E5;
  37. }
  38. .sibling-border-top {
  39. &+.sibling-border-top {
  40. border-top: 1px solid #E5E5E5;
  41. }
  42. }
  43. .sibling-border-bottom {
  44. &+.sibling-border-bottom {
  45. border-bottom: 1px solid #E5E5E5;
  46. }
  47. }
  48. }
  49. @layer base {}