vue2 에 tailwindcss 설치하기 > IT 기술백서

IT 기술백서

직접 알아내거나 검색하기 귀찮아서 모아 둔 것

css | vue2 에 tailwindcss 설치하기

본문

1. 기존에 설치되었으면 삭제

[code]

npm uninstall tailwindcss postcss autoprefixer

[/code]

 

2. 설치

: postcss8 이 지원되지 않기때문에 7 호환으로 설치한다.

[code]

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

[/code]

 

3. tailwindcss 초기화

[code]

npx tailwindcss init

[/code]

아래 파일이 생성됨

/tailwind.config.js

/postcss.config.js

 

4. postcss.config.js

[code]

const autoprefixer = require('autoprefixer')

const tailwindcss = require('tailwindcss')


module.exports = {

  plugins: [tailwindcss, autoprefixer],

}

[/code]

 

5. assets/scss/tailwindcss.scss

[code]

@tailwind base;

@tailwind components;

@tailwind utilities;

[/code]

 

6, main.js 에 import 한다

[code]

import './assets/scss/tailwind.init.scss'

[/code]

댓글 0개

등록된 댓글이 없습니다.

Menu