Tailwindcss を HTML で使うための方法を英語で記述してみた

今回は学習のアウトプットを英語で行いました。
理由としては、私はとても英語が苦手なのですが、最近モダンな技術を追えば追うほど、英文での情報収集の方が、情報の鮮度、正確さが高いと感じるようになったので、意識的に英語を使おうと考えたからです。
それでは早速、やっていこう 📛

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

1. High flexibility.
   • However, the amount of text is less in bootstrap than in tailwindcss.
2. Small file size.
   • Using Purge-css will increase performance.
     • example Tailwindcss under 10KB, bootstrap about 230KB
3. 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,
    },
  };
};