Issue
I'm trying to learn tailwind. I set up an example project with extremely simple html, so hopefully this will be very easy for someone to figure out. I created a green box and set the height and width to 52px, but the box is much bigger - 208px by 208px. The generated CSS shows that the class h-52 resolves to 13rem instead of 52px, (and the same for width).
If anyone knows how to fix this issue please let me know.. Below are the relevant files.
The file structure of my project is as follows:
tailwind
build
css
styles.css
index.html
src
input.css
tailwind.config.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tailwind Experiment</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="bg-emerald-500 w-52 h-52"></div>
</body>
</html>
Generated CSS
...
.h-52 {
height: 13rem;
}
.w-52 {
width: 13rem;
}
...
input.css (the starting CSS that's getting compiled into styles.css)
@tailwind base;
@tailwind components;
@tailwind utilities;
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./build/*.html'],
theme: {
extend: {},
},
plugins: [],
}
And I use this command to compile the necessary css: npx tailwindcss -i ./src/input.css -o ./build/css/style.css --watch
Solution
You can check in the documentation that indeed by default, h-52 resolves to 13rem. To have h-52 resolve to 52px, you'd need to customize your Tailwind configuration like:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./build/*.html'],
theme: {
extend: {
height: {
52: '52px',
},
},
},
plugins: [],
}
You can do this for width too:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./build/*.html'],
theme: {
extend: {
height: {
52: '52px',
},
width: {
52: '52px',
},
},
},
plugins: [],
}
Live example using the Tailwind CDN:
tailwind.config = {
theme: {
extend: {
height: {
52: '52px',
},
width: {
52: '52px',
}
}
}
}<script src="https://cdn.tailwindcss.com/3.3.5"></script>
<div class="bg-emerald-500 w-52 h-52"></div>Answered By - Wongjn
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.