tailwind.css 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. @tailwind base;
  2. @tailwind components;
  3. @tailwind utilities;
  4. @layer components {
  5. }
  6. @layer utilities {
  7. }
  8. /*默认为row,横向排列*/
  9. .layout-items-center {
  10. display: flex;
  11. align-items: center;
  12. }
  13. .layout-items-baseline {
  14. display: flex;
  15. align-items: baseline;
  16. }
  17. .layout-baseline-between {
  18. display: flex;
  19. align-items: baseline;
  20. justify-content: space-between;
  21. }
  22. /*左右居中*/
  23. .layout-center {
  24. display: flex;
  25. justify-content: center;
  26. }
  27. /*两边排列*/
  28. .layout-slide {
  29. display: flex;
  30. align-items: center;
  31. justify-content: space-between;
  32. }
  33. /*左中右排列*/
  34. .layout-around {
  35. display: flex;
  36. align-items: center;
  37. justify-content: space-around;
  38. }
  39. /*两边排列, 换行*/
  40. .layout-slide-wrap {
  41. display: flex;
  42. align-items: center;
  43. justify-content: space-between;
  44. flex-wrap: wrap;
  45. }
  46. /*上下排列*/
  47. .layout-col-slide {
  48. display: flex;
  49. flex-direction: column;
  50. justify-content: space-between;
  51. }
  52. /*左右垂直居中*/
  53. .layout-abs-center {
  54. display: flex;
  55. justify-content: center;
  56. align-items: center;
  57. }
  58. /*横向左右垂直居右*/
  59. .layout-end {
  60. display: flex;
  61. justify-content: flex-end;
  62. align-items: center;
  63. }
  64. /*纵向左右垂直居中*/
  65. .layout-col-center {
  66. display: flex;
  67. flex-direction: column;
  68. justify-content: center;
  69. align-items: center;
  70. }
  71. .text-color{
  72. color: var(--text-color);
  73. }