Tailwind CSS 在Html中的使用

官网地址：Installation - Tailwind CSS

前言

记录从0到1在原生HTML中通过Tailwind CLI 使用Tailwind CSS

Tailwind CLI

第一步，新建一个HTML文件夹

mkdir HTML

第二步，安装依赖tailwindcSS

npm install -D tailwindcss

第三步，初始化tailwindcSS，生成tailwind.config.js

npx tailwindcss init

第四步，配置模版路径，新建 src 文件夹

第五步，将Tailwind指令添加到CSS中

第一步，新建css文件夹,样式文件都放此目录

第二步，新建一个样式入口文件，如：main.css

第三步，添加Tailwind指令

@tailwind base;
@tailwind components;
@tailwind utilities;

第六步，构建Tailwind CLI

【注意】这里只是举的一个例子，具体根据css 存放位置进行修改即可

npx tailwindcss -i ./css/main.css -o ./dist/main.css --watch

第七步，开始在HTML中使用Tailwind

【注意】 要注意引入路径

  
  
  



  

    Assigned to
    

      
        
          
          Tom Cook
        
        
          
        
      

      
      

        
        

          

            
            
            Wade Cooper
          

          
          
            
          
        

        
      
    
  

至此，配置成功