Before starting, make sure you have installed Node.js and npm. You can check if they are already installed with the following commands: node -v npm -v If your system does not yet support Node.js and NPM, you can refer to our [Node.js tutorial](httsp://www./nodejs/nodejs-tutorial.html). Using npm in China can be very slow. You can use the custom cnpm (with gzip compression support) command line tool from Taobao instead of the default npm: $ npm install -g cnpm --registry=https://registry.npmmirror.com $ npm config set registry https://registry.npmmirror.com This allows you to use the cnpm command to install modules: $ cnpm install For more information, please refer to: [http://npm.taobao.org/](http://npm.taobao.org/). * * * ## Install Tailwind CSS 3 > This chapter covers the installation method for Tailwind CSS 3. The installation method for Tailwind CSS 4 has changed; it automatically detects HTML and JavaScript files, eliminating the need to manually configure content sources. > > > For details, see: (#). Install via npm: Install and configure Tailwind CSS in your local project: npm install -D tailwindcss npx tailwindcss init After executing the above commands, a basic configuration file tailwind.config.js will be generated for customization. ### Configure Template Paths Next, we can add the template paths in the tailwind.config.js file: ## tailwind.config.js file code: /** @type {import('tailwindcss').Config} */ module.exports={ content:["./src/**/*.{html,js}"],// Adjust according to the actual file types in your project theme:{ extend:{}, }, plugins:[], } ### Add Tailwind Directives to CSS File In your main CSS file src/input.css (create it if it doesn't exist), add each Tailwind functional module via the @tailwind directive. ## src/input.css file code: @tailwind base; @tailwind components; @tailwind utilities; ### Start the Tailwind CLI Build Process Run the CLI tool to scan for classes in template files and build the CSS. npx tailwindcss -i ./src/input.css -o ./src/output.css --watch ### Use Tailwind in HTML Add the compiled CSS file to the tag, and then you can start using Tailwind's utility classes to style your content. ## src/index.html file code:

Hello world!

The above steps are suitable for most modern front-end projects, whether using Vue, React, or other frameworks. Ensure the compiled CSS file is included in the build process so that Tailwind CSS styles can be correctly applied to your project. * * * ## Using PostCSS Installing Tailwind CSS as a PostCSS plugin is the best way to seamlessly integrate with build tools like webpack, Rollup, Vite, and Parcel. ### 1. Install Tailwind CSS Install Tailwind CSS and its dependencies via npm, and generate the tailwind.config.js configuration file. npm install -D tailwindcss postcss autoprefixer npx tailwindcss init ### 2. Add Tailwind to PostCSS Configuration In your project's postcss.config.js file, add the tailwindcss and autoprefixer plugins. ## postcss.config.js file code: module.exports={ plugins:{ tailwindcss:{}, autoprefixer:{}, } } ### 3. Configure Template Paths In the tailwind.config.js file, add the paths to all your template files so Tailwind CSS can generate the necessary styles based on these files. ## tailwind.config.js file code: /** @type {import('tailwindcss').Config} */ module.exports={ content:["./src/**/*.{html,js}"],// Replace with the actual template paths in your project theme:{ extend:{}, }, plugins:[], } ### 4. Add Tailwind Directives to CSS File In your main CSS file, add the following three core Tailwind directives to import base styles, component styles, and utility styles. ## main.css file code: @tailwind base; @tailwind components; @tailwind utilities; ### 5. Start the Build Process Start the project's build process via `npm run dev` or the relevant commands configured in the package.json file. npm run dev ### 6. Use Tailwind CSS in HTML Ensure the compiled CSS file is correctly linked in the tag (some frameworks may do this automatically), and then start using the utility classes provided by Tailwind CSS to style your content in HTML. ## index.html file code:

Hello world!