tailwindcss介绍及安装

在前端开发中，我们经常用到现成的ui框架，如Bootstrap，如果要创建一个按钮，只需要将class设置为btn即可，极大的提高了我们的开发效率

但是这也限制了定制化，使用这些框架的前端界面相似度极高

另外就是从css代码来讲，由于定义的类中属性较多，颗粒度较大，如在btn类中设置了圆角，同时也在其他类中设置圆角，那么这些设置圆角的代码就是重复代码，如果把设置圆角的代码独立出来定义一个类名，就可以降低css代码量，提高代码的重用

Taiwind CSS就是这样一款开源的 CSS 样式库，它将开发过程中会用到的几乎全部的css样式以一种极小的颗粒度定义成一套固定的css类名称，由于颗粒度极小，这些css类可以自由的组合，测试和重用

不同于传统的UI框架，tailwindcss没有现成的组件，需要使用这些颗粒度极小的类进行自己组合创建

在vite中配置tailwindcss

npm install -D tailwindcss postcss autoprefixer
    安装依赖

npx tailwindcss init -p
    初始化配置
    会生成postcss.config.js和tailwind.config.js配置文件
    在tailwind.config.js配置文件中content项中添加模板文件的路径
        content: ["./src/**/*.{html,js}"]

    将tailwind指令添加到css文件或style标签中
    要确保加载css文件或style标签的文件会被编译
    如入口文件的html文件，该文件在编译阶段不会进行编译
@tailwind base;
@tailwind components;
@tailwind utilities;

在sveltekit中配置tailwindcss

npm install -D tailwindcss postcss autoprefixer
    安装依赖

npx tailwindcss init -p
    初始化配置
    在tailwind.config.js配置文件中content项中添加模板文件的路径
        content: ["./src/**/*.{html,js}"]

    在svelte.config.js配置文件中
        添加：import { vitePreprocess } from '@sveltejs/kit/vite';
        添加：preprocess: vitePreprocess()
        
        import adapter from '@sveltejs/adapter-auto';
        import { vitePreprocess } from '@sveltejs/kit/vite';
        const config = {
        kit: {
            adapter: adapter()
        },
        preprocess: vitePreprocess()
        };


    添加tailwind指令
    推荐添加在路由根目录routes中的+layout.svelte或+page.svelte文件中
@tailwind base;
@tailwind components;
@tailwind utilities;

使用svelte-add工具添加tailwindcss

它会自动在依赖配置中添加使用TailwindCSS所需的一切依赖，以及相关插件，并修改相应的配置文件

npx svelte-add tailwindcss

npm i

该工具仅是修改所有配置文件，最后还是需要使用 npm i 来安装对应的依赖