Wiki Contribution
To make it easier for teams to transcribe the wiki, we've introduced Tailwind CSS into the Flask framework project, which is a very convenient way to ease the workload for future teams.
Introducing Tailwind CSS in Flask Framework Project
Steps
- Enter the project directory first
For example, my Wiki repository is located in the uestc-china folder of the iGEM 2023 folder on drive D(D:\iGEM 2023\uestc-china). So you can see that there is a Readme.md officially provided by iGEM in the uestc-china folder, as well as the most important wiki folder, which contains various wiki pages. Some files and folders like. vscode are non project files that may be generated during use, and do not need to be consistent. This folder is the folder where subsequent commands are executed.
- Install Tailwind CSS
Taking VSCode as an example, open the terminal and confirm that your current path (the content before '>') is in the project root directory. First, check the npm version through npm - v to ensure that you can use npm correctly (if it does not return the corresponding version, check how to install npm or Node.js).
PS D:\iGEM 2023\uestc-china> npm -v
6.14.12Subsequently, you can copy and paste the official website command[1]. There are many failure modes here, and you can check the corresponding error message on the internet to solve it.
npm install -D tailwindcss // Using npm to install Tailwind CSS
npx tailwindcss init // Initialize Tailwind CSSAfter assuming success, you can use npm Is tailwindcsscommand to view the version of tailwind. If no version number is returned, it indicates that the installation was not successful. At the same time, after successful execution, it will be found that there are additional items in the root directory of the project:
node_modules folder is equivalent to the dependencies installed into the project, which also includes Tailwind CSS.tailwind.config.ts is the configuration file for Tailwind, which can be edited as needed.
- Configure Tailwind CSS
According to the instructions on the official website[1], replace the value corresponding to content in the tailwind.config.ts file with your own path, which should include all HTML and JavaScript files that require Tailwind CSS in the project.
For example, the content provided on the official website[1] ["./* */*. {(html, js)}"] represents any files (/*. {(html, js)}) that end in HTML or JS in all subfolders of the src folder of the project root directory. All of these files will be within the management scope of Tailwind, and the classes provided by Tailwind can be written in these files as desired.
For Wiki projects, since there is no src folder, simply use the HTML within all sub folders as content.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.html"],
theme: {
extend: {},
},
plugins: [],
}- Import Tailwind CSS to CSS file
If there is no separate CSS style file, create a CSS file directly. If a CSS file has already been written, there is no need to create a new one. Add the instructions provided on the official website[1] to the newly created or already written file header.
@tailwind base;
@tailwind components;
@tailwind utilities;- Build
After copying and pasting the command on the official website[1], modify the input and output files to the desired ones.
npx tailwindcss -i ./src/input.css -o ./static/output.css --watchAfter the command is executed, rebuilding and done will be displayed, which is the process of Tailwind CSS hot update. Every time a file that matches the content rule in Step 3 is modified, a hot update will be triggered.
- Introducing Styles in HTML Files
Simply import from the output file path in Step 5, as shown in the following code.
< link href="../ ../static/output.css" rel="stylesheet" />
< h1 class="text-3xl font-bold underline text-blue-700">
Hello world !
< /h1> - How to determine if one is successful?
Referring to Step 6, write a test element and add some Tailwind classes. After opening the HTML file in the browser, right-click it and selectinspect/review element. If you see that the corresponding style for Tailwind has been applied, it indicates completion.
Notes
- Enter
npm install - D tailwindcss in Terminal and npm ERR! code EPERM npm ERR! syscall open npm ERR! Path D: \Program Files \nodejs\npm_ packages_cacach npm ERR! errno -4048 appears, indicating insufficient module operation permissions in the node.js file. The solution is to modify the permissions of the node.js folder to full control. - Key step: Set the content of
content: [""] in tailwind.config.js, and all files in the content will be compiled. In the iGEM repository, if you write content ["./* */*. {(html, js){"], the js file will also be imported. The 'bootstrap.bundle.min.js' file in the folder will also be compiled, resulting in many redundant or even overwritten CSS files. - Command
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch allows the script to be run from package.json when a file changes, enabling updates for each error file. The input.css and output.cssfiles in the watch command need to be adjusted according to the specific situation in their own folder. - CSS must be written in the
static folder, otherwise there will be a404 in the flask console. Wiki project Flask has been configured so that it can't access files in arbitrary locations, and a 404 error will appear in the console, so be sure to put the output file in Step 5 in the . /static directory! - CSS must be written in the
static folder, otherwise there will be404 in the Flask console. The Wiki project Flask has been configured, so it cannot access files from any location. It is important to place the output file from Step 5 in the staticdirectory!! - When using Tailwind CSS in VSCode, you can install the 'Tailwind CSS IntelliSense' plugin[2] for easier use.
