Tailwindcss 를 사용하던 와중 커스터마이징을 할 수 있다는 것을 알았다.

 

클릭시, 해당 링크로 새창 이동

Vue.js 3 - tailwindcss3 를 사용하였습니다.

 

하는 방법 바로 가시죠.

우선 tailwind.config.js 파일이 /src 내에 있습니다.

이곳에다가 작성하는것인데요,

 

theme.extend. 내에 작성

module.exports = {
  purge: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        'hero-pattern': "url('pattern-bg.png')",
        'second-image-pattern': "url('sencond-bg.png')",
      })
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

이렇게 작성하면 해당 내용을 전역으로 사용할 수 있게된다.

 

사용 사례

이상입니다.

 

유용하게 쓰십쇼

반응형
저작자표시 (새창열림)

'FrontEnd > css' 카테고리의 다른 글

[ Tailwind css ] Vue.js 3, vue-cli 4.5.x Error Install the another correct version! 설치 오류  (0) 2022.02.15
[ CSS ] 남은 영역 채우기, how to cover the left area by css?  (0) 2021.12.09
[ Css ] Transition 트랜지션 사용하기  (0) 2021.10.26

vue.js 3, vue-cli 4.5.x 버전에서 tailwind css 를 설치하려고하는데 에러가 발생하였다.

지난 포스팅에서는 아직 tailwindcss가 vue3에 맞춰서 나오지 않았기에 에러가 났지만, 지금은 출시가 되었다.

그런데 에러라니!?

그래서 해결책을 찾아왔다.

vue 버전들을 최신화해주세요

core-js, vue, vue-cli 의 버전이 최신이 아니었기에 오류가 발생하였다.

그래서 각각 버전을 모두 최신화 하였고, 정상적으로 설치가 되었다.

 

최신화: core-js, vue, vue-cli

npm install --save core-js@^3
npm install vue@next
vue upgrade --next

아무래도 얼마전에 tailwind.css 가 최신화가 된만큼, node, core-js, vue 등의 버전도 가장 최신으로 올려야  알맞게 설치가 된다.

 

그리고 다시 tailwindcss 설치

npm install -D tailwindcss postcss autoprefixer



■ 결과 확인

가장 중요한 결과 확인 작업이 남았다. 기본 default css 설정 후, class를 입력해보았다.

 

해당 웹사이트 공유

 

Installation: Tailwind CLI - Tailwind CSS

Documentation for the Tailwind CSS framework.

tailwindcss.com

 

 

 

How to update core-js to core-js@3 dependency?

While I was trying to install and setup react native, the precaution observed about the core-js version as update your core-js@... to core-js@3 But don't know how to update my core-js. $ sudo react-

stackoverflow.com

에러 해결은 역시 stackoverflow

 

Error: PostCSS plugin tailwindcss requires PostCSS 8(update v2 to v3)

I am trying to update tailwindcss v2 to v3(I am using ReactJs). I have installed the latest version of autoprefixer, tailwindcss and postcss. This is the error: ./src/index.css (./node_modules/css-

stackoverflow.com

 

반응형
저작자표시 (새창열림)

'FrontEnd > css' 카테고리의 다른 글

[ Tailwind.css ] 이미지를 배경 '클래스' 로 등록하는 방법, customizing background Image  (0) 2022.02.17
[ CSS ] 남은 영역 채우기, how to cover the left area by css?  (0) 2021.12.09
[ Css ] Transition 트랜지션 사용하기  (0) 2021.10.26

 

 

부모 요소에 display: flex를 사용하고 자식 요소를 원하는 영역을 배치하던 와중,

 

이렇게 child2 에 특별히 지정하지 않은 남은 영역을 모두 할당하고 싶을 때 사용하면 된다.

child2 를 예시로 들어보면,

.child2 {
    flex: 1;
}

을 해주면 남은 영역이 모두 할당된다.

 

 

 

맨 위 사진의 코드 예시)

<style>
    .parent {
        width: 100%;
        height: 200px;
        background-color: chocolate;
        display: flex;
    }
    .child1 {
        background-color: darkcyan;
    }
    .child2 {
        background-color: thistle;
        flex:1;
    }
</style>
<body>
    <div class="parent">
        parent div
        <div class="child1">child1</div>
        <div class="child2">child2</div>
    </div>
</body>

 

 

이상

 

 

반응형
저작자표시 (새창열림)

'FrontEnd > css' 카테고리의 다른 글

[ Tailwind.css ] 이미지를 배경 '클래스' 로 등록하는 방법, customizing background Image  (0) 2022.02.17
[ Tailwind css ] Vue.js 3, vue-cli 4.5.x Error Install the another correct version! 설치 오류  (0) 2022.02.15
[ Css ] Transition 트랜지션 사용하기  (0) 2021.10.26

안녕하세요 상훈입니다.

우리의 WebApplication을 조금이라도 더 예쁘게 꾸며줄 css - transition을 포스팅하겠습니다.

간단한 설명과 함께 화면 구성

 

그 중 hover의 이벤트를 사용하려고 합니다.

html에서는 클래스명만 정해주시면 됩니다.

<body>
    <p>width, height, bg-color, transform 을 위한 트랜지션 결합.</p>
    <div class="transform"></div>
</body>

클래스명 "transform"에 대해서 아래의 style을 지정해주면 됩니다.

<style>
.transform{
    border: 1px solid black;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.transform:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
</style>

 

rotate를 보시면 아시다시피 transition 과 transform으로 지정한 내용을 살펴보면,

 

2초동안 [ 가로 200px, 세로 200px, 배경색 #FFCCCC, 180도 회전 ] 을 하게됩니다.

결과물

이상입니다.

해당 내용은 전부 'MDN WebDocs' 에 작성되어져 있습니다.

 

CSS 트랜지션 사용하기 - CSS: Cascading Style Sheets | MDN

CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니

developer.mozilla.org

 

 

 

반응형
저작자표시 (새창열림)

'FrontEnd > css' 카테고리의 다른 글

[ Tailwind.css ] 이미지를 배경 '클래스' 로 등록하는 방법, customizing background Image  (0) 2022.02.17
[ Tailwind css ] Vue.js 3, vue-cli 4.5.x Error Install the another correct version! 설치 오류  (0) 2022.02.15
[ CSS ] 남은 영역 채우기, how to cover the left area by css?  (0) 2021.12.09

+ Recent posts

티스토리툴바