💄

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

4 min read

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

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;
      
    • Create index.HTML files
    • Add <link rel="stylesheet" href="dist.css" />
      • The built CSS will be used here.
    • Create dist.css file
    • 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,
    },
  };
};

Discussion

ログインするとコメントできます