When developing UI, does it take time to adjust styles and make things responsive, reducing development efficiency?
Tailwind CSS is a utility-first CSS framework that allows for quick styling by simply combining class names.
In this article, we will explain how to use Tailwind CSS to build efficient and beautiful UIs, with practical code examples.
It is full of useful information for mid-career engineers who want to improve their development speed.
Tailwind CSS Overview and Features
conclusion: Tailwind CSS is a framework that enables rapid UI development by applying class-based styles.
reason: With traditional CSS, you would have to create a style sheet and define and apply classes and IDs.
Tailwind CSS allows you to instantly apply styles to HTML elements by specifying classes directly on them.
Examples:
1 | <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">button</button> |
In this way, you can complete the button style by simply combining classes.
point:
• Utility First: Specify detailed styles directly in classes
• Customizability: You can freely change the theme color and size in tailwind.config.js
• Responsive: Easily control breakpoints with sm:, md:, lg: etc.
• JavaScript Framework Compatible: Easy to combine with React, Vue, etc.
How to build a development environment
conclusion: Installing Tailwind CSS is easy in just a few steps.
reason: You can get set up quickly using the official CLI tool or PostCSS plugin.
procedure:
1. Create a project directory and initialize it with npm init -y
2. Install Tailwind CSS and required packages
1 | npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p |
3. Specify the path of the HTML or JS file in the content of tailwind.config.js.
4. Create src/input.css and write the following:
1 | @tailwind base; @tailwind components; @tailwind utilities; |
5. Execute the build command
1 | npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch |
This will generate dist/output.css and you can apply the styles by including it in your HTML file.
Basic styling practices
conclusion: Tailwind CSS allows you to quickly style by combining classes.
reason: Each class represents a specific style and is intuitive to use.
Examples:
• Text color and size:
1 | <p class="text-gray-700 text-lg">Sample text</p> |
•Margins and Padding:
1 | <div class="m-4 p-6">content</div> |
•Using Flexbox:
1 2 3 4 | <div class="flex justify-between items-center"> <span>left</span> <span>Right side</span></div> |
In this way, by combining classes you can easily achieve complex styles.
Component Reuse and Management
conclusionTailwind CSS allows you to reuse styles using the @apply directive.
reason: Consolidating common styles makes your code easier to read and maintain.
Examples:
1 | /* styles.css */ .btn-primary { @apply bg-blue-500 text-white px-4 py-2 rounded; } |
1 | <!-- HTMLファイル --><button class="btn-primary hover:bg-blue-600">button</button> |
In this way, common styles can be defined as classes and reused, making development more efficient.
Responsive design support
conclusion: Tailwind CSS allows you to easily create responsive designs by specifying breakpoints.
reason: You can apply styles for specific screen sizes by simply adding a prefix to the class name.
Examples:
1 2 3 | <div class="text-base md:text-lg lg:text-xl"> Responsive Text</div> |
In this example, the text size changes depending on the screen size.
In addition, flexible responsiveness is possible by using prefixes such as sm:, md:, lg:, xl:, and 2xl:.
Practical UI Component Creation
conclusion: Tailwind CSS helps you quickly build working UI components.
reason: By combining a wide variety of utility classes, even complex UIs can be easily implemented.
Examples:
• Card Components:
1 2 3 4 5 6 7 | <div class="max-w-sm rounded overflow-hidden shadow-lg"> <img class="w-full" src="image.jpg" alt="画像"> <div class="px-6 py-4"> <div class="font-bold text-xl mb-2">title</div> <p class="text-gray-700 text-base">Description goes here.</p> </div></div> |
• Navigation bar:
1 2 3 4 5 6 7 8 9 10 11 12 | <nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6"> <div class="flex items-center flex-shrink-0 text-white mr-6"> <span class="font-semibold text-xl tracking-tight">logo</span> </div> <div class="block lg:hidden"> <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white"> <svg class="fill-current h-3 w-3" viewbox="0 0 20 20"> <path d="M0 3h20v2H0z M0 9h20v2H0z M0 15h20v2H0z" /> </svg> </button> </div></nav> |
These components can be combined with Tailwind CSS classes to create beautiful UI in no time.
summary
Tailwind CSS enables fast and flexible UI development with its utility-first approach.
Combining classes makes applying styles intuitive and improves development efficiency.
It is also suitable for large-scale projects because it is responsive and components can be easily reused.
By putting into practice what we have introduced here, you will be able to understand the essence of Tailwind CSS and make your daily development more comfortable.
English 
Japanese