# Debian APT 软件源分析工具 by Tauri

**Repository Path**: zinface/tauri.debian-apt-analyzer

## Basic Information

- **Project Name**: Debian APT 软件源分析工具 by Tauri
- **Description**: 使用 tauri 开发的 debian 源分析工具(怠工中)
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-04
- **Last Updated**: 2024-09-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Tauri + Solid

This template should help get you started developing with Tauri and Solid in Vite.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)


----

# 一些记录

## tailwindcss 

> https://www.tailwindcss.cn/docs/guides/solidjs

### 1. 仅使用 tailwindcss 

1. 安装依赖：  
    ```
    pnpm add -D tailwindcss
    ```
2. 初始化配置文件  
    ```
    pnpx tailwindcss init
    ```
3. 修改 tailwind.config.js 文件  
    ```js
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
    ```
    这里必须写上 **content** 部分内容才会生效
4. 创建一个 tailwind.css 文件，并在入口 jsx 中引入  
    tailwind.css
    ```css
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    ```
    index.jsx
    ```jsx
    import "./tailwind.css"
    ```

### 2. 与 postcss 一起使用 tailwindcss

1. 安装所需要的库  
    ```
    pnpm install -D tailwindcss postcss autoprefixer
    ```
2. 初始化配置文件  
    ```shell
    pnpx tailwincss init
    # 如果没有出现 postcss.config.js 请加上 --postcss 参数
    pnpx tailwincss init --postcss
    ```
3. 修改 postcss.config.js 文件  
    ```js
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    }
    ```

### 3. 一些必须说明的部分

1. 可以不用创建 tailwind.css 文件，直接将内容写到 index.css 或 App.css

2. 由于使用了 tailwind.css，所以整个 tauri 的默认生成的样式都会出现变化，例如一些标签失去了默认效果  

    > 这是 tailwindcss 为了统一所有平台样式导致的因素

    例如 **h1** 标签失去了默认的效果，您可能需要以下 tailwind 来达到默认效果
    
    ```html
    <h1 class="text-3xl font-bold">Welcome to Tauri!</h1>
    ```

    例如默认的 App.css 中 **padding** 使用的 **em** 单位相比引入 tailwindcss 前值比例变小了

    ```css
    /* padding: 0.6em 1.2em; */
    @apply px-5 py-2;
    ```

3. 在使用 tailwind 的过程中，您必须考虑以上这些因素

### 4. 对 tailwindcss 进行类的排序

1. 你会发现，像这样的代码比较难看  
    ```html
    <h1 class="text-3xl font-bold">Welcome to Tauri!</h1>
    ```
    希望转换后的样子(雾)
    ```html
    <h1 class="font-bold text-3xl">Welcome to Tauri!</h1>
    ```
    那么你可以开始了

2. 安装需要的依赖
    ```
    pnpm install -D prettier prettier-plugin-tailwindcss
    ```

3. 在 .prettierrc 中写入
    ```js
    {
        "plugins": ["prettier-plugin-tailwindcss"]
    }
    ```
    > 或者通过 **prettier** CLI 工具与 **--plugin** 参数一起使用(测试过，类似手动执行)

    ```shell
    pnpx prettier --check [检查目标文件]
    pnpx prettier --write [对目标文件进行格式化]
    # 建议不要用 --write . 
    ```

4. 在 vscode 中安装 **Prettier - Code Format** 插件  

    随后配置一个 **.vscode/settings.json** 或用户全局的配置

    ```jsonc
    {
        "prettier.enable": true,
        "prettier.useEditorConfig": false,                   // 配置文件的优先级处理
        "prettier.prettierPath": "./node_modules/prettier",  // prettier 使用的 node 模块
        "[javascript]": {                                    // 主要的配置部分，
            "editor.maxTokenizationLineLength": 2500,
            "editor.formatOnSave": true,                        // 配置 javascript 在保存时格式化
            "editor.defaultFormatter": "esbenp.prettier-vscode" // 使用 Prettier 格式化插件
        }
    }
    ```