TailwindCSS基本样式

TailwindCSS尺寸

包括 sm (小屏幕)，md (中等屏幕)，lg (大屏幕) 和 xl (超大屏幕)

  <div id="app"> 
    <div class="mx-auto bg-pink-200 mb-6 h-10 max-w-sm ">


    </div>
    <div class="mx-auto bg-pink-200 mb-6 h-10 max-w-md ">


    </div>
    <div class="mx-auto bg-pink-200 mb-6 h-10 max-w-lg ">


    </div>
    <div class="mx-auto bg-pink-200 mb-6 h-10 max-w-xl ">


    </div>
    <div class="mx-auto bg-pink-200 mb-6 h-10 max-w-2xl ">


    </div> 
  </div>

TailwindCSS文字颜色

    <p>如何编写</p>
    <span   class="text-indigo-500">文</span>
    <span   class= "text-orange-500" >字</span>
    <span   class= "text-purple-600"  >颜</span>
    <span   class= "text-green-700"  >色</span>
    <span   class= "text-white"  >与</span>
    <span   class= "text-black"  >背</span>
    <span   class= "text-gray-500"  >景</span>
    <span   class= "text-yellow-300"  >颜</span>
    <span   class= "text-red-500"  >色</span>

效果

如何编写TailwindCSS

可以直接去官网https://www.tailwindcss.cn/ 去搜索在原来写css的语法去搜索

下面是实例

伪类

<div>
      <div
      class="max-w-sm mx-auto mb-6 bg-red-100 rounded-md text-center py-6"
    >
      <button
        class="px-4 py-2 rounded-md text-white bg-red-500 hover:bg-red-700"
      >
        李嘉诚666
      </button>
    </div>  

效果