current position:Home>Install CSS from tailwind

Install CSS from tailwind

2022-04-29 09:15:15Ayou10031

Install from scratch Tailwindcss

tailwindcss

establish Vue engineering

vue create tailwindcss
cd tailwindcss

install Tailwind

# Tailwind CSS requires Node.js 12.13.0 or higher.
npm install -D [email protected] [email protected] [email protected]

create profile

npx tailwindcss init -p

read The configuration file Learn more about

To configure Tailwind Remove unused style declaration in production environment

  // tailwind.config.js
  module.exports = {
    
   purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
    
      extend: {
    },
    },
    variants: {
    
      extend: {
    },
    },
    plugins: [],
  }

Please check the details Optimize production guidelines

stay CSS Introduction in Tailwind

establish ./src/index.css file

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Read the document Add basic styles , Extract components , and Add a new function class Customize CSS Expand

Last , Make sure CSS Files are imported into ./src/main.js In file

// src/main.js
import {
     createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

common problem

Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.

under these circumstances , You should install PostCSS 7 Compatibility version .

If you encounter the above error , Please uninstall Tailwind And reinstall with a compatible version :

npm uninstall tailwindcss postcss autoprefixer
npm install -D [email protected]:@tailwindcss/postcss7-compat [email protected]^7 [email protected]^9

Webstorm No, TailwindCSS Tips

  • Must install webstorm2020.3 Version above Bring their own tailwindcss plug-in unit
  #  uninstall 
  npm uninstall tailwindcss postcss autoprefixer
  #  install 2.1.4 edition 
  npm install -D [email protected]:@tailwindcss/[email protected] [email protected]^7 [email protected]^9
  #  Generate configuration files 
  npx tailwindcss init -p

In this version , Some features will not work

copyright notice
author[Ayou10031],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204290629024465.html

Random recommended