[Nuxt3] tailwind 적용

1. 개요

 

Nuxt3 에 tailwind 를 적용하는 방법을 알아보도록 하겠습니다.

 

저 또한, tailwind css를 적용할때 예전 방법으로 적용하려 하였더니 적용이 되지 않더군요.

 

따라서, 아래 모듈을 다운받아서 이용하시면 됩니다.

 

https://www.npmjs.com/package/@nuxtjs/tailwindcss

@nuxtjs/tailwindcss

 

2. 설치

 

# Using yarn
yarn add --dev @nuxtjs/tailwindcss

# Using npm
npm install --save-dev @nuxtjs/tailwindcss

 

 

nuxt.config.ts 에 모듈 사용을 등록해줍니다.

 

[nuxt.config.ts]

 

{
  modules: [
    '@nuxtjs/tailwindcss'
  ]
}

 

 

이렇게 하시면 tailwind 설치가 완료되었습니다.

 

지금부턴 tailwind 설정을 추가적으로 진행해보겠습니다.

 

• ./assets/css/tailwind.css
• ./tailwind.config.{js,cjs,mjs,ts}

 

위의 설정을 위한 파일들을 생성해줍니다. 

 

nuxt가 실행이 될때, tailwind 모듈이 해당 파일들을 주목하게 됩니다.

 

[tailwind.css]

 

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

 

 

아래 tailwind.config.ts 설정은 옵션입니다.

 

[tailwind.config.ts]

 

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');
const primary = colors.blue;
const secondary = colors.pink;
const info = colors.sky;
const warning = colors.amber;
const success = colors.emerald;
const error = colors.red;

module.exports = {
	content: [
		'./assets/**/*.{vue,js,css}',
		'./components/**/*.{vue,js}',
		'./layouts/**/*.vue',
		'./pages/**/*.vue',
		'./server/**/*.{js,ts}',
		'./plugins/**/*.{js,ts}',
		'./nuxt.config.{js,ts}',
	],
	darkMode: 'class', // or 'media' or 'class'
	theme: {
		extend: {
			colors: {
				primary,
				secondary,
				info,
				warning,
				success,
				error,
			},
			textColor: {
				skin: {
					base: 'var(--color-text-base)',
					muted: 'var(--color-text-muted)',
					active: 'var(--color-text-active)',
					hover: 'var(--color-text-hover)',
					icon: 'var(--color-text-icon)',
				},
			},
			backgroundColor: {
				skin: {
					fill: 'var(--color-fill)',
					'fill-active': 'var(--color-fill-active)',
					'fill-hover': 'var(--color-fill-hover)',
					'icon-fill': 'var(--color-icon-fill)',
				},
			},
			fontFamily: {
				sans: ['Poppins', ...defaultTheme.fontFamily.sans],
			},
		},
	},
	variants: {
		extend: {},
	},
	// plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};

 

 

[nuxt.config.ts]

 

css: [
   '~/assets/css/style.css',
],
tailwindcss: {
   cssPath: '~/assets/css/tailwind.css',
   configPath: 'tailwind.config',
   exposeConfig: false,
   injectPosition: 0,
   viewer: true,
},

 

 

이로써, nuxt3에 tailwind css 적용을 마치도록 하겠습니다.