颜色指南

颜色公式

xx-xxxx-xxx

xx 代表设置的主体，常见的例如bg 背景颜色 text 文本颜色 border 边框颜色

xxxx 代表颜色的名称，例如上图中的Red、Orange、Amber等

xxx 是数字代表颜色的亮度，Tailwind CSS预设了 50-950

样例

    
    
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>



    

        

            bg-orange-50
        
        

            bg-orange-100
        
        

            bg-orange-200
        
        

            bg-orange-300
        
        

            bg-orange-400
        
        

            bg-orange-500
        
        

            bg-orange-600
        
        

            bg-orange-700
        
        

            bg-orange-800
        
        

            bg-orange-900
        
        

            bg-orange-950
        
    

显示：

设置颜色透明度

在亮度后面添加”/数字”,来设置颜色的透明度

    
    
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>



    

        

            bg-orange-500/10
        
        

            bg-orange-500/20
        
        

            bg-orange-500/30
        
        

            bg-orange-500/40
        
        

            bg-orange-500/50
        
        

            bg-orange-500/60
        
        

            bg-orange-500/70
        
        

            bg-orange-500/90
        
        

            bg-orange-500/90
        
        

            bg-orange-500/100
        
    

演示：