Tailwindscss가 HTML에서 사용하는 방법을 영어로 기술해 봤습니다.

7778 단어 CSSTailwind CSShtnltech
이번에 영어로 학습한 성과가 있다.
이유는 제가 영어를 잘 못하지만 요즘은 현대 기술을 추구할수록 영어로 정보를 수집하는 신선도와 정확도가 높다는 생각에 의식적으로 영어를 쓰려고 한다는 것입니다.
그럼 바로 시작합시다.📛

Why Tailwindcss

  • A Utility first CSS framework.
  • No need to create your own classes.
  • You don't have to name it.
  • No need to fine-tune your style.
  • Easy to support responsive and dark mode.
  • Good performance.
  • Unused classes can be purge in the production environment.

    • Differences from bootstrap

  • High flexibility.
  • However, the amount of text is less in bootstrap than in tailwindcss.
  • Small file size.
  • Using Purge-css will increase performance.
  • example Tailwindcss under 10KB, bootstrap about 230KB
  • No JavaScript dependencies.
  • Works well with javascript frameworks
  • bootstrap's javascript is hidden and conflicts with javascript frameworks, making it difficult to use.
  • If you need Javascript, use headlessUI .

    • How to set up Tailwindcss

  • Use with frameworks

  • installing Tailwind CSS as a PostCSS plugin
  • What is postcss ?
  • Example
  • cd desktop
  • mkdir your-directory-name
  • cd your-directory
  • npm -init y
  • Create the package.json file
  • Node.js is required.
  • npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
  • Install Tailwind via npm
  • npx tailwindcss init -p
  • Create Tailwindcss config file
  • Create PostCSS config file
  • Include Tailwind in your CSS 
    /* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

  • ! If css validation is working, install the PostCSS Language Support extension to vscode
  • Create index.HTML files
  • Add <link rel="stylesheet" href="dist.css" />
  • The built CSS will be used here.
  • Create dist.css file
  • Tailwind CSS IntelliSense
  • Add Scripts ( package.json ) 
    •  "scripts": {
-  "test": "echo \"Error: no test specified\" && exit 1"
+  "build": "postcss styles.css -o dist.css"
},
  • Meaning: Output ( -o ) the build styles.css file to dist.css
  • npm uninstall postcss
  • npm i -D postcss-cli
  • Make npm run build available
  • After executing the build command, the styling can be checked in the browser.
  • Paste the path of the HTML file into the url field of the browser.

    • Use Purge and Minify to build in production environment


  • What is autoprefixer ?
  • One that automatically adds a vendor prefix.
  • By adding vendorprevix, the same css can be applied to different browsers.

  • Example: purge css that is not used in index.html
  • tailwind.config.js
  • Can be specified as multiple arrays
  • Glob patterns are available 
    • module.exports = {
+  purge: ["./index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
  • package.json 
    • "scripts": {
-  "build": "postcss styles.css -o dist.css"
+  "build": "NODE_ENV=production postcss styles.css -o dist.css"
},
  • npm i -D cssnano
  • Use minify to make it even lighter.
  • Add cssnano: {}, to postcss.config.js . 
    • module.exports = {
plugins: {
  tailwindcss: {},
  autoprefixer: {},
+  cssnano: {},
  },
}
  • Building the development environment
  • Add "dev..." to package.json . 
    • "scripts": {
+  "dev": " postcss styles.css -o dist.css",
  "build": "NODE_ENV=production postcss styles.css -o dist.css"
},
  • Disable minify in the development environment.
  • Functionize postcss.config.js .
  • Enables reference to context. 
    • module.exports = (ctx) => {
  return {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
      cssnano: ctx.env === "production" ? {} : false,
    },
  };
};
    Docker 네트워크
    Blazor 응용 프로그램에서 bool 스위치 값을 기반으로 CSS 클래스 문자열 동적으로 구성

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage