Tailwind와 함께 Nuxt를 사용하고 있습니다. 다음 main.less 파일이 있습니다.
.btn-default {
@apply py-2 px-4 bg-white font-medium rounded-lg shadow-md;
&:focus {
@apply ring;
}
}
이 컴파일 오류가 발생합니다. 둘 중 하나를 찾을 수 없기 때문에 @apply사용할 수 없거나 실제 정의에 : hover, : active 등과 같은 의사 선택기가 포함되어 있습니다. 존재한다고 확신하는 경우 모든 명령문이 제대로 작동 하는지 확인하십시오. 동일한 CSS 트리의 클래스에만 사용할 수 있으므로 Tailwind CSS가 CSS를 확인 하기 전에 처리 됩니다..ring.ring.ring@import@apply
제거 ring하면 오류가 사라집니다.
내 nuxt.config.js에서 다음과 같이 적은 파일을 가져옵니다.
css: [
'@/assets/css/main.less',
],
이것은 내 tailwind.config.js입니다.
module.exports = {
future: {
// removeDeprecatedGapUtilities: true,
// purgeLayersByDefault: true,
},
purge: [],
theme: {
extend: {
colors: {
primary: '#03B3B3',
secondary: '#00DDA2',
'dark-gray': '#323232',
},
screens: {
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
},
fontFamily: {
sans: ["Rubik"],
serif: ["Rubik"],
mono: ["Rubik"],
display: ["Rubik"],
body: ['Rubik'],
},
borderRadius: {
DEFAULT: '8px',
},
borderWidth: {
'3': '3px',
},
container: {
center: true,
padding: {
DEFAULT: '15px',
},
},
},
},
variants: {},
plugins: [],
}
내가 도대체 뭘 잘못하고있는 겁니까? 다른 수업과 함께 작동하는 이유는 무엇입니까?
어리석은 날, 문서에서 직접 링 클래스를 사용하려고했지만이 클래스는 Tailwind 1에 존재하지 않습니다. Nuxt는 아직 Tailwind 2를 사용할 준비가되지 않았습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다