點燈坊

失くすものさえない今が強くなるチャンスよ

Using w to Set Width

Sam Xiao's Avatar 2022-01-18

We can use the w series utility to set the width of the element.

Version

TailwindCSS 3.0

w-auto

width000

The width is determined by the content.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>TailwindCSS</title>
</head>
<body>
  <img class="w-auto" src="https://picsum.photos/640/480/?random=10">
</body>
</html>

Line 10

<img class="w-auto" src="https://picsum.photos/640/480/?random=10">
  • w-auto：the width is changed automatically by the browser

w-auto is the default value of width, we often ignore this utility

Fixed Width

width002

The width is determined by the fixed value.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>TailwindCSS</title>
</head>
<body>
  <img class="w-64" src="https://picsum.photos/640/480/?random=10">
</body>
</html>

Line 10

<img class="w-64" src="https://picsum.photos/640/480/?random=10">
  • w-64 : width is a fixed value

Fluid Width

width003

The width is determined by the percentage value.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>TailwindCSS</title>
</head>
<body>
  <img class="w-1/2" src="https://picsum.photos/640/480/?random=10">
</body>
</html>

Line 10

<img class="w-1/2" src="https://picsum.photos/640/480/?random=10">
  • w-1/2 : width is a fraction value

Arbitrary Width

width004

The width is determined by an arbitrary value.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>TailwindCSS</title>
</head>
<body>
  <img class="w-[320px]" src="https://picsum.photos/640/480/?random=10">
</body>
</html>

Line 10

<img class="w-[320px]" src="https://picsum.photos/640/480/?random=10">
  • w-[320px] : width is an arbitrary value

Conclusion

  • We can use w utility to set the width of the element instead of the selector

Reference

TailwindCSS, Width

# TailwindCSS