Skip to main content

Basic Learning

Tailwind CSS​

Official Website

The first method is to import and use directly

<script src="https://cdn.tailwindcss.com"></script> #Use this

The second method

#1 npm init -y # Generate package.json
#2 npm i -D tailwindcss postcss autoprefixer
#3 npx tailwindcss init # Generate tailwind.config.js
#4 npx tailwindcss -i ./src/input.css -o ./src/output.css --watch #Generate css file, you can modify the path npx tailwindcss -i ./src/css/input.css -o ./public/css/style.css --watch

#3 tailwind.config.js

module.exports = {
  content: ["./public/**/*.{html，js}"], # Modify your own html
  theme: {
    extend: {},
  },
  plugins: [],
}

Explanation
./src/**/*.{html,js}: matches all .html and .js files in the src directory and all its subdirectories.
./public/**/*.html: matches all .html files in the public directory and all its subdirectories.

#4 Generate input.css file

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

package.json #No modification required

"scripts":{
	"dev": "npx tailwindcss -i ./src/css/input.css -o ./public/css/style.css --watch"
}

As long as you use it in cmd, npm run dev will automatically npx tailwindcss -i ./src/css/input.css -o ./public/css/style.css --watch


HTML

<link rel="stylesheet" href="css/style.css" /> #引入 output.css

Self-created tailwind.config.js

theme: {
	extend: {
		colors: {
			primary: '#FF6363',
			secondary: {
				100: '#E2E2D5',
				200: '#888883',
				}
			}
		}
	},
},

use

bg-secondary-100
0%