What is Tailwind and Why Tailwind?

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without writing CSS from scratch. Unlike traditional CSS frameworks like Bootstrap or Foundation, which provide predefined components, Tailwind gives you complete control over your design by offering utility classes for almost every CSS property. This approach can significantly speed up the development process and make the codebase more maintainable.

Using Tailwind CSS, you can apply styles directly in your HTML, which can help you keep your CSS file size small and your website fast. Tailwind is highly customizable, allowing you to create unique designs by tweaking its configuration file. Furthermore, it has excellent documentation, a large community, and regular updates, making it a reliable choice for modern web development.

Benefits of using Tailwind CSS

• Utility-first approach: Tailwind provides utility classes for common CSS properties, allowing you to build custom designs quickly and efficiently.

• Customizable: Tailwind’s configuration file lets you customize the utility classes to match your design system and branding.

• Fast development: By applying styles directly in your HTML, you can speed up the development process and reduce the amount of CSS code you need to write.

• Consistent design: Tailwind’s utility classes help maintain a consistent design across your website by following a predefined set of styles.

• Responsive design: Tailwind includes responsive utility classes that make it easy to create responsive layouts for different screen sizes.

• Large community: Tailwind has a large community of developers who share tips, tricks, and resources to help you get started and solve common problems.

The Box Model in CSS

Before diving into Tailwind’s padding, margin, and border utilities, let’s briefly review the box model in CSS. The box model is a fundamental concept in CSS that describes how the elements on a web page are structured and displayed. The box model consists of four main components:

• Content: The innermost part where text and images appear.

• Padding: The space between the content and the border.

• Border: The line surrounding the padding and content.

• Margin: The outermost space that separates the element from other elements.

Understanding these components is crucial for creating well-structured layouts and designs in CSS.

Here is a visual representation of the box model:

What is Tailwind Padding?

Padding is the space between an element’s content and its border. It helps to create breathing room inside an element, making the content more readable and visually appealing.

Tailwind Padding Classes

Tailwind CSS provides a variety of padding utility classes to add padding to an element. These classes are prefixed with p- followed by the size you want to apply. Here are some examples:

 class="p-4">Padding 4

Here is a CodePen example demonstrating Tailwind padding classes. Feel free to experiment with different padding values to see how they affect the layout.

What is Tailwind Margin?

Margin is the space outside an element’s border that separates it from other elements. It helps to create visual separation between elements and control the layout of a web page.

Tailwind Margin Classes

Tailwind CSS provides margin utility classes to add margin to an element. These classes are prefixed with m- followed by the size you want to apply. Here are some examples:

 class="m-4">Margin 4

Here is a CodePen example demonstrating Tailwind margin classes. Play around with different margin values to see how they affect the spacing between elements.

What is Tailwind Border?

A border is a line that surrounds an element’s padding and content. It helps to visually separate elements and define their boundaries.

Tailwind Border Classes

Tailwind CSS provides border utility classes to add borders to an element. These classes are prefixed with border- followed by the size, style, and color you want to apply. Here are some examples:

 class="border">Default Border

Check out this CodePen example to see how different border styles look in practice.

Putting It All Together

Now that you understand Tailwind padding, margin, and border utilities, you can combine them to create well-structured layouts and designs in your web development projects. By leveraging Tailwind’s utility-first approach, you can build custom designs quickly and efficiently without writing CSS from scratch.

Here is an example of how you can use Tailwind padding, margin, and border classes together:

 class="m-4 p-4 border-2 border-gray-500">
    
 class="text-2xl mb-4">Tailwind CSS Example
     class="mb-2">This is a paragraph with some padding and margin.

     class="bg-blue-500 text-white p-2 rounded">Click Me

In this example, we have a div element with margin, padding, and a border. Inside the div, we have a heading, a paragraph, and a button styled with Tailwind classes. This demonstrates how you can use Tailwind’s utility classes to create a well-structured layout with minimal CSS code.

Here is how the example looks:

Links and Resources

• Tailwind CSS Documentation
• Tailwind CSS Playground
• Tailwind CSS GitHub Repository
• Tailwind CSS Installation

Conclusion

In this article, we explored how to set Tailwind padding, margin, and border in your web development projects. Understanding these fundamental concepts and utility classes can help you create well-structured layouts and designs with ease. By leveraging Tailwind’s utility-first approach, you can build custom designs quickly and efficiently without writing CSS from scratch. Experiment with different padding, margin, and border values to see how they affect your layout and design. Happy coding!

The post Mastering Tailwind CSS: A Guide to Padding, Margin, and Borders appeared first on ProdSens.live.

Vertical alignment can often be a challenge in web design, but with Tailwind CSS, you can easily align elements in the center of the screen.

This quick guide will walk you through the steps to vertically align content within a full-screen div using Tailwind CSS, complete with nicely styled examples.

Step 1: Setting Up Tailwind CSS

First, make sure you have Tailwind CSS set up in your project. If you’re starting from scratch, you can use the following CDN link in your HTML file:

 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    
     href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">


    

If you’re using a build tool like Webpack or a framework like Next.js, refer to the Tailwind CSS installation guide for the appropriate setup.

Step 2: Creating the Full-Screen Div

To create a full-screen div, we’ll use Tailwind’s utility classes. We’ll start by creating a div that spans the full viewport height and width. Here’s a simple example:

 class="min-h-screen flex items-center justify-center bg-gray-100">
    

• min-h-screen: This class sets the minimum height of the div to the full height of the viewport.
• flex: This makes the div a flex container.
• items-center: This vertically centers the content inside the flex container.
• justify-center: This horizontally centers the content inside the flex container.
• bg-gray-100: This adds a light gray background color to the div.

Step 3: Adding Content

Now, let’s add some content inside our full-screen div. We’ll use a simple card component as our example:

 class="min-h-screen flex items-center justify-center bg-gray-100">
     class="bg-white p-8 rounded-lg shadow-lg">
        
 class="text-2xl font-bold mb-4">Vertically Aligned Content
         class="text-gray-700">This content is centered both vertically and horizontally using Tailwind CSS.

    

• bg-white: This sets the background color of the card to white.
• p-8: This adds padding to the card.
• rounded-lg: This rounds the corners of the card.
• shadow-lg: This adds a large shadow to the card.
• text-2xl: This sets the font size of the heading to 2xl.
• font-bold: This makes the heading bold.
• mb-4: This adds a bottom margin to the heading.
• text-gray-700: This sets the color of the paragraph text to a dark gray.

Step 4: Styling the Content

To make our example more visually appealing, we can add some additional styling. Let’s enhance the card with a more polished look:

 class="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-500 to-purple-600">
     class="bg-white p-8 rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-300">
        
 class="text-3xl font-extrabold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500">
            Vertically Aligned Content
        
         class="text-gray-800 text-lg">
            This content is centered both vertically and horizontally using Tailwind CSS.
        

    

• bg-gradient-to-r from-blue-500 to-purple-600: This creates a background gradient for the full-screen div.
• shadow-2xl: This adds a larger shadow to the card.
• transform hover:scale-105 transition-transform duration-300: This adds a scaling effect when the card is hovered over, with a smooth transition.
• text-3xl: This sets the font size of the heading to 3xl.
• font-extrabold: This makes the heading extra bold.
• text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500: This creates a gradient text effect for the heading.
• text-lg: This sets the font size of the paragraph text to large.

Conclusion

By using Tailwind CSS’s utility classes, you can easily vertically align content within a full-screen div. The flexbox utilities provided by Tailwind make it simple to center content both vertically and horizontally with just a few classes.

For even more styling options and to create beautiful designs effortlessly, check out the DevDojo Tails Tailwind CSS builder. It’s a fantastic tool to help you with your workflow and create stunning designs with Tailwind CSS.

The post How to Vertically Align Content with Tailwind CSS Across a Full-Screen Div appeared first on ProdSens.live.

Tailstore is a responsive eCommerce template built with Tailwind CSS, created to help you set up elegant online stores with ease.

Demo

Features Overview:

Main Page:

• Swiper Slider: Captivate your visitors with an engaging Swiper slider, perfect for showcasing top products, promotions, or announcements.
• Brand Carousel: Highlight trusted brands with a smooth carousel, boosting credibility and user trust.
• Latest/Popular Products: Keep customers engaged with sections dedicated to the newest and most popular products.
• Blog Section: Share news, updates, and articles with an integrated blog section to enhance your content marketing efforts.
• Subscription Form: Grow your email list with an attractive and user-friendly subscription form.

Shop Page:

• Product Filters: Improve the shopping experience with advanced filters, allowing users to sort products by categories, prices, and other criteria.
• Product Listings: Display your products in a clean and organized manner, emphasizing key details and high-quality images.

Product Detail Page:

• Comprehensive Descriptions: Provide detailed information about each product to help customers make informed purchasing decisions.
• Product Images: Showcase multiple high-resolution images to give customers a thorough view of each product.
• Customer Reviews: Build trust with an integrated review section where customers can share their experiences.
• Information Tabs: Organize product details into tabs for easy navigation and readability.
• Social Sharing: Increase product visibility with social sharing buttons, encouraging customers to share on their favorite platforms.

Additional Pages:

• User Authentication: User-friendly registration and login pages to facilitate a smooth user experience.
• 404 Error Page: Custom 404 page to guide users back to the main site seamlessly.
• Checkout Process: Streamlined checkout page designed to reduce cart abandonment and improve the shopping experience.
• Shopping Cart: A well-structured cart page featuring a coupon code field for discounts and promotions.
• Responsive Design: A sticky, responsive header with an integrated cart module, ensuring users can access their cart from any page on the site.

Template page
Download

The post Tailstore – Free Tailwind CSS eCommerce Template appeared first on ProdSens.live.

Tailwind CSS has rapidly become one of the most popular utility-first CSS frameworks, making it easier than ever to create beautiful and responsive designs with minimal effort. To help you get started on your next project, I’ve compiled a list of outstanding free Tailwind CSS templates.

Elevate – Free Tailwind Business Template

Elevate is a free Tailwind business template designed to enhance your online presence with style and elegance.

Key Features:

• Main Page: Features a captivating hero section, dynamic clients slider, and comprehensive features section to highlight your business offerings and build trust with your audience.
• 404 Page: Custom-designed to guide users back on track seamlessly.
• Contact Page: Includes an interactive map, user-friendly contact form, and multiple contact options to foster communication and engagement.
• Portfolio Page: Filterable and stylish, this page allows visitors to explore your projects effortlessly.
• Team Page: Showcases your team members, enhancing trust and familiarity.
• About Us Page: Provides an in-depth look into your brand’s story and values, connecting with your audience on a deeper level.
• Reviews Page: Displays client testimonials to boost credibility and reputation.

More info/download

Modernize Free Tailwind CSS Admin Template

Modernize is a free admin template built on Tailwind Framework, enriched with various additional features, all wrapped in an eye-catching and gracefully designed package.

Key Features:

• Tailwind CSS: Utilizes the power of Tailwind CSS for efficient styling and customization.
• Preline – UI Framework: Built on the Preline UI Framework, ensuring a robust and reliable foundation.
• Basic Dashboard: Provides a basic dashboard layout to kickstart your admin panel design.
• Simple Login-Register Page Added: Includes easy-to-use login and registration pages for user authentication.
• Code Splitting: Optimizes code splitting for improved performance and faster loading times.
• Google Fonts: Access a wide range of Google Fonts to enhance typography choices.
• Easy Folder Structure: Organized folder structure for easy navigation and management of project files.
• Organized Code Structure: Well-organized codebase for improved readability and maintenance.
• Hassle-free Setup Process: Simplified setup process for quick deployment and integration into your project.

More info/download

Porto – Free Tailwind CSS Portfolio Template

Porto is a cutting-edge Tailwind CSS template tailored for developers who aim to showcase their skills and projects in a sleek, modern layout that distinguishes them from the crowd.

Key Features:

• Fully Responsive Design: Ensures a stunning look on any device, from desktops to smartphones, maintaining accessibility and visual appeal.
• Modular Components: Designed with reusability in mind, allowing you to mix and match sections to create a unique portfolio. No two Porto portfolios are alike!
• Tailwind CSS Powered: Offers unparalleled customization, making it easy to tweak colors, fonts, and layouts with Tailwind’s utility-first CSS.
• Pre-filled Content Sections: Comes with ready-to-use sections like ‘High Experience’ and ‘Testimonials,’ making it simple to showcase your best work by just replacing placeholder text.

More info/download

Effortless – Free Tailwind CSS Website Template

Effortless – solution for crafting a sleek and modern landing page effortlessly, powered by Tailwind CSS.

Key Features:

• Sticky Menu: Enjoy smooth navigation with the sticky menu feature, keeping your main navigation accessible at all times.
• Hero Section: Make a bold statement with a captivating hero section, perfect for showcasing your key message or product.
• Features Section: Highlight the unique features and benefits of your offering in a clean and organized manner, effectively conveying your value proposition.
• Client Testimonials Swiper Slider: Build trust with potential customers by showcasing real client testimonials in an interactive swiper slider, adding dynamism to your landing page.
• Subscribe Section: Grow your audience and maintain engagement with a dedicated subscribe section, encouraging visitors to join your mailing list effortlessly.
• Simple Footer: Complete your landing page with a functional yet straightforward footer, providing essential information and links without overwhelming your audience.

More info/download

Cleopatra – Free Responsive Tailwind CSS Admin Dashboard Template

Cleopatra offers a feature-rich admin dashboard template built with Tailwind CSS, designed with developers in mind and packed with options. While some components may not be fully functional out of the box, Cleopatra provides the flexibility to customize and add functionality to suit your specific needs.

Key Features:

• Tailwind CSS: Utilizes the power and flexibility of Tailwind CSS for seamless styling and customization.
• HTML5, SASS: Carefully coded with clear comments in JS, SASS, and HTML files, enhancing code customizability.
• 100% Responsive: Ensures optimal viewing experience across various devices, from desktops to smartphones.
• Analytics & E-commerce Dashboard: Features two home dashboards, including Analytics Dashboard and E-commerce Dashboard.
• Cross-Browser Compatibility: Compatible with all modern browsers, ensuring consistent performance and user experience.
• Multi-page Template: Provides a multi-page layout for comprehensive admin dashboard functionality.
• Email Apps Window: Includes email apps window for efficient communication management.
• Chat Apps Window: Offers a chat apps window for seamless team collaboration.
• Different Types of UI Elements: Includes diverse UI elements to enrich the user interface.
• Several Widgets: Offers several widgets for displaying important information and data.

More info/download

Astro Portfolio: Free Portfolio Website Template with Astro and Tailwind CSS

Astro Portfolio offers a free and dynamic template for crafting your portfolio website using Astro 4.0 alongside Tailwind CSS. This combination ensures a seamless and customizable experience tailored to your creative needs.

Features:
Integration with Tailwind CSS: Harness the power of Tailwind CSS with support for Dark mode, allowing for versatile and visually appealing designs.

Astro Integrations:

• @astrojs/mdx: Enables Markdown support for easy content creation.
• @astrojs/image: Enhances image handling capabilities for optimized performance.
• @astro-icon: Facilitates the integration of icons to enrich visual elements.
• @astro-seo: Ensures robust SEO optimization for enhanced online visibility.
• @astro-navbar: Provides navigation functionality for seamless user experience.
• Playwright E2E Tests: Set up end-to-end tests to ensure the reliability and functionality of your portfolio website.

More info/download

Prima Persona: Simple One-Page Tailwind Template

Prima Persona offers a simple yet elegant one-page Tailwind template designed to make a professional and personal statement online.

Key Features:

• One-Page Format – tailored for simplicity and ease of use
• Modern Design Aesthetic
• High-Performance Scores

More info/download

Base – Free Tailwind Agency and Startup Template

Base is a high-quality Tailwind CSS template designed specifically for business, digital agency, and startup websites.

Key Features:

• Homepage: Features 12 essential sections, each meticulously coded in Tailwind CSS, providing a complete and visually appealing business site.
• Pages: Includes all necessary pages to ensure a fully functional website:
• Blog Category: Organize and display blog posts effectively.
• Blog Single: Showcase individual blog posts with a clean, reader-friendly layout.
• Log In: Secure and user-friendly login page for user authentication.
• Register: Easy-to-use registration page for new users.
• 404 Page: Custom 404 error page to guide users back on track if they encounter a broken link.

More info/download

Landing – Free Tailwind CSS Landing Page Website Template

Landing is a free Tailwind CSS template designed to create a stunning and functional landing page. It features a variety of cutting-edge elements, making it perfect for showcasing your product or service effectively.

Key Features:

• Tailwind CSS: Utilizes the power of Tailwind CSS for efficient styling and customization.
• HTML5: Built with the latest HTML5 standards for modern web development.
• Fully Responsive: Ensures optimal viewing experience across all devices.
• Fixed Top Navigation Bar: Keeps the navigation menu accessible at all times for easy site navigation.
• Call to Action Button: Encourages user interaction with strategically placed call-to-action buttons.
• On-hover Effects: Enhances user experience with interactive on-hover effects.
• Hero Header: Captivates visitors with a compelling hero header section.
• Pricing Table: Clearly displays pricing options in a well-organized table format.

More info/download

Simple Light – Free Landing Page Template

Simple Light is a free landing page template crafted with TailwindCSS and fully coded in React / Next.js. It is designed to offer all the essential components developers need to create a stunning landing page for SaaS products, online services, and more.

Key Features:

• TailwindCSS: Utilizes TailwindCSS for efficient and flexible styling.
• React / Next.js: Fully coded in React and Next.js, providing a modern development experience.
• Essential Components: Includes all the basic components needed to create a professional landing page.

More info/download

Geeky Nextjs – Free Nextjs & Tailwind CSS Blog Template

Geeky Nextjs is a user-friendly blog template built with Next.js and Tailwind CSS. It ensures your website is fast, SEO-friendly, and incredibly easy to manage. With an up-to-date design and powerful features, Geeky Nextjs is perfect for creating a high-performance blog.

Key Features:

• Google PageSpeed Score 100 (Desktop): Ensures blazingly fast performance for desktop users.
• Dark and Light Mode: Offers a dynamic theme switcher for better user experience and accessibility.
• Supports Contact Form
• Disqus Comment Support: Enable readers to engage with your content through Disqus comments.
• Semantic HTML Document Structure: Utilizes semantic HTML for better SEO and accessibility.

More info/download

The post 10+ Free Tailwind CSS Templates appeared first on ProdSens.live.

Version 0.11.0 was just released with three new components!

Let’s jump right into what’s new at Rails Designer:

New

• Command Menu Component
  
• Button Component
• Grids Component
  

Additions

• Added new Tabs Component variant

Bugfix

• Fix icon comment on Modal Component variant

From the Blog

• ViewComponent over Turbo Stream Broadcasts
• Hidden Gems of Tailwind CSS (this one was shared far and wide; seeing thousands of visits)!
• How to Work with Forms inside Forms in Rails

Other things

Last week I released a new gem: rails_icons. It is an icon library-agnostic gem. And will soon be included by default in Rails Designer.

Interested in sharing Rails Designer with the Ruby on Rails community? Become an affiliate (and get 25% commision)!

The post Rails Designer v0.11.0 released: new Command Menu appeared first on ProdSens.live.

This post was originally published on Rails Designer.

If you’ve used Rails’ UJS, which is now defunct, you probably used the data-disable-with="" attribute in the past. It worked like this:

<⁠%= form_for @post do |f| %>
  <⁠%= f.submit "Save", data: { disable_with: "Saving…" } %>
<⁠% end %>

When the form was submitted, the submit button would be disabled and shown “Saving…” instead of “Save”. Nifty! No JavaScript required!

But the world has moved on and is now using Hotwire. Initially, when Hotwire was announced in December 2020, there was no alternative for data-disable-with. But forward to November 2021, button’s submitted “through” Turbo now (prior to turbo:submit-start) get the disabled attribute and it is removed prior to firing turbo:submit-end.

Sidenote: this PR added the option to mimic the previous UJS behaviour. I’d like a bit more control, so I prefer the method outlined here.

That is all you need to show some fancy-pants submit buttons. The PR above shows how you can do it with vanilla CSS. Like so:

button .show-when-disabled { display: none; }
button[disabled] .show-when-disabled { display: initial; }

button .show-when-enabled { display: initial; }
button[disabled] .show-when-enabled { display: none; }

   class="show-when-enabled">Submit
   class="show-when-disabled">Submitting...

Which works great, but my preferred tool is Tailwind CSS, so I can create a component just for a button and have everything contained in one file.

Let’s look how this can be done with Tailwind CSS’ utility classes instead. Let’s use the same HTML from above:

 class="group/button">
   class="block group-disabled/button:hidden">Submit
   class="hidden group-disabled/button:block">Submitting…

With some extra styles attached the button looks like this when enabled:

And like this with the disabled attribute added:

It works using the group/button (always name your Tailwind CSS’ groups!). Then it’s just using the disabled modifier-utility.

You can have a play with it in this Tailwind Play (try adding the disabled attribute to the button).

You are of course not limited to plain text in the disabled-state, you can add icons, change the style and add transitions.

Check Rails Designer’s ButtonComponent for inspiration.

The post How to Add Disabled State to Buttons with Turbo & Tailwind CSS appeared first on ProdSens.live.

E-commerce is a huge part of today’s internet and Tailwind CSS has been a growing CSS framework that more and more developers are adopting. I’d like to share with you a couple of customer service pages that we’ve coded over at Flowbite.

Get started with a collection of components and pages to show questions and answers to your E-commerce customers with FAQ and community forums.

Default customer service page

Use this component to show a list of question and a form where you can submit a question within a modal to provide support to customers.

• Source code and example

Customer service with drawer

This example can be used to show both questions and answers and use a drawer with a form element that allows you to add a question.

• Source code and example

Customer service accordion with FAQ

Use this example to show a list of frequently asked questions and answers inside an accordion component for your e-commerce customers.

• Source code and example

Customer service with wysiwyg

Use this example to show a list of questions and answers with upvotes and a wysiwyg form to submit an answer as a product customer.

• Tailwind CSS Source code and example

Customer service page

Use this example to show a full page of customer service data using FAQ sections and a modal to submit a question.

• Source code and example

Credits

These components could not have been built without the usage of the following open-source libraries and frameworks:

• Tailwind CSS
• Flowbite Icons
• Flowbite Library

The post Customer service pages for e-commerce built with Tailwind CSS appeared first on ProdSens.live.

Astro is the new hot new web framework on the block. All the cool kids are using it. I’ve recently given up, drank the Kool-Aid, and gone all in on it.

I’ve rewritten this website, my partner’s website, my university rugby club’s website. I’m moving my Applied Genomics course website to Starlight, the Astro team’s documentation framework. The nf-core site has been rewritten in Astro and Svelte from PHP. I’m all in.

The beauty of Astro is it’s the Nextflow of web frameworks.¹ It allows you to wrap other UI Frameworks in a web framework rather than forcing you to pick one, so you don’t just have to pick React, Vue, or Svelte. You can have them all in the same application. You can just use HTML components. That’s the beauty. That’s why it’s exciting. That’s why I think it’ll stick around.

So anyways, I wanted to hook up Emacs with Astro support. For now, I’ve just been roughing it out there and running Prettier by itself and turning off save on format and auto-complete. It’s been scary.

What I’m seeking from Emacs is multifaceted: Tree-sitter support, LSP (Language Server Protocol) support—to alert me of any missteps—and a fully functional formatter. A frustrating hour was lost to Prettier mangling my Astro templates by wrapping them in quotes—a bug I could have done without. And while we’re at it, add Tailwind CSS LSP support into the mix for good measure.

Astro Tree-sitter Support

Tree-sitter is an incremental parsing system for programming tools.
Find out more about it on the project’s website!

As the old saying goes, there’s an Emacs package for everything. So, of course, someone’s already written one for Astro and Tree-sitter.

Setup for astro-ts-mode appears simple:

(package! astro-ts-mode)

(use-package! astro-ts-mode
  :after treesit-auto)

But wait, there’s more!

Because this major mode is powered by Tree-sitter, it depends on an external grammar to provide a syntax tree for Astro templates. To set it up, you’ll need to set treesit-language-source-alist to point to the correct repositories for each language.

You can choose to set it up and run treesit-install-language-grammar for astro tsx and css.

Or you can take the red pill and use treesit-auto and automatically install the language grammar.

In case this your first Edmund experience, two things you should know. I love to automate things, and I love a good rabbit hole.

treesit-auto

There was a tip from Ian S. Pringle(Who owns both a farm and a digital garden!).

Ruby Juric(the author of astro-ts-mode) converted the snippet to use let to avoid creating a global variable.

(use-package! astro-ts-mode
  :config
  (global-treesit-auto-mode)
  (let ((astro-recipe (make-treesit-auto-recipe
                       :lang 'astro
                       :ts-mode 'astro-ts-mode
                       :url "https://github.com/virchau13/tree-sitter-astro"
                       :revision "master"
                       :source-dir "src")))
    (add-to-list 'treesit-auto-recipe-list astro-recipe)))

I think this worked for me. I had built it manually with treesit-auto before.

Oh, by the way

!NOTE
Make sure you have a working C compiler as cc in your PATH, since this needs to compile the grammars.

Emacs lsp-mode and Astro Language-server

The official Astro editor docs link to an article with instructions to configure eglot, but there’s no equivalent one for lsp-mode.

npm i -g @astrojs/language-server

I just had to add a hook to astro-ts-mode and it pulled right up.

(use-package! astro-ts-mode
  :after treesit-auto
  :init
  (when (modulep! +lsp)
    (add-hook 'astro-ts-mode-hook #'lsp! 'append))
  :config
;; ...

prettier-plugin-astro in Emacs with Apheleia

From Sorixelle’s Emacs config I found the magic snippet that had prettier use --parser=astro in .astro files.

(set-formatter! 'prettier-astro
  '("npx" "prettier" "--parser=astro"
    (apheleia-formatters-indent "--use-tabs" "--tab-width" 'astro-ts-mode-indent-offset))
  :modes '(astro-ts-mode))

Tailwind CSS IntelliSense in Emacs

Of course, there’s already a package for TailwindCSS using LSP. With Doom Emacs installation instructions as well!

(use-package! lsp-tailwindcss
  :when (modulep! +lsp)
  :init

  (setq! lsp-tailwindcss-add-on-mode t)
  :config

  (add-to-list 'lsp-tailwindcss-major-modes 'astro-ts-mode))

Conclusion

You can find all of the code in my Doom Emacs config. It’s got everything, Tree-sitter, LSP, Prettier, and Tailwind CSS IntelliSense.

1. Did I really just compare a very niche DSL to describe a niche programming language? 

The post Setting up Doom Emacs for Astro Development appeared first on ProdSens.live.

A progress bar, that’s what we are going to build.

See it live and get the code

Why are progress bars important

When you are building a website, you will probably have to show a progress bar to your users for many different reasons.
For example, you might want to show a progress bar to your users when they are uploading a file, or when they are downloading something.
Some Use cases:

• Show a progress bar to your users when they are uploading a file.
• Show a progress bar to your users when they are downloading something.
• Show a progress bar to your users when they are processing a form.
• When reading a blog post, show a progress bar to show long is left to read.

Let’s create the structure

The important parts:

• x-data="{ progress: 0, interval: null }" is the data that will be used to store the progress value.
• x-init="() => { interval = setInterval(() => { progress < 100 ? progress += 5 : clearInterval(interval); }, 100); }" is the code that will be executed every 100ms to update the progress value.
• x-text="progress + '%'" is the code that will be executed to display the progress value.
• x-bind:style="'width: ' + progress + '%;'" is the code that will be executed to set the width of the progress bar.

  x-data="{ progress: 0, interval: null }"
  x-init="() => { interval = setInterval(() => { progress < 100 ? progress += 5 : clearInterval(interval); }, 100); }">
  
    x-text="progress + '%'">
  

Let's add some the classes with Tailwind CSS

The important parts:

• w-full is the width of the container.
• text-sm text-gray-500 is the text color.
• bg-gray-200 is the background color.
• rounded-full is the border radius.
• h-2 is the height of the progress bar.
• transition-all is the transition effect.
• ease-in-out is the animation effect.
• duration-500 is the duration of the animation.
• cursor-pointer is the cursor style.
• relative is the positioning style.
• overflow-hidden is the overflow style.

  x-data="{ progress: 0, interval: null }"
  x-init="() => { interval = setInterval(() => { progress < 100 ? progress += 5 : clearInterval(interval); }, 100); }"
  class="w-full">
  
    class="text-sm text-gray-500"
    x-text="progress + '%'">
  

Well that was it! You can now use the progress bar in your project.

Conclusion

In this tutorial, we learned how to create a progress bar using Tailwind CSS and Alpine.js. We covered the basics of Tailwind CSS, including its syntax and classes, and how to use them in our progress bar.

The post How to create a progress-bar with Tailwind CSS and Alpinejs appeared first on ProdSens.live.

Introduction

Tailwind CSS offers immense flexibility for customization, empowering developers to tailor their stylesheets to fit their unique needs. In this comprehensive guide, we’ll explore various techniques and strategies to master Tailwind CSS customization.

Table of Contents

1. Understanding the Config File
2. Customizing Colors
3. Extending Utilities
4. Extending Screens
5. Overriding Default Styles
6. Using arbitrary values
7. The important modifier and the Exclamation Mark
8. Using prefixes to avoid conflicts
9. Adding Plugins

Understanding the Config File

The tailwind.config.js file serves as the heart of Tailwind CSS customization. Here, we delve into its structure and components, exploring how it enables you to tailor Tailwind CSS to your project’s unique requirements.

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

The darkMode property enables you to configure dark mode utilities in Tailwind CSS. You can set it to media to enable dark mode based on the user’s system preferences or class to enable dark mode based on a CSS class.

The theme property is where you can customize the default styles provided by Tailwind CSS. You can extend existing styles or add new styles to create a unique design system for your project.

The variants property allows you to customize the responsive and hover variants provided by Tailwind CSS. You can extend these variants to create custom responsive and hover styles for your project.

The plugins property enables you to add third-party plugins to enhance the functionality of Tailwind CSS. You can install plugins via npm and add them to your tailwind.config.js file to extend the capabilities of Tailwind CSS.

By understanding the structure and components of the tailwind.config.js file, you can leverage its power to customize Tailwind CSS to fit your project’s requirements.

Customizing Colors

Tailwind CSS provides a rich color palette out of the box, but you may want to customize these colors to match your brand’s color scheme. You can achieve this by extending the theme configuration in your tailwind.config.js file.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#FF6347',
        secondary: '#FFA07A',
        // More custom colors
      },
    },
  },
};

In the example above, we’ve added two custom colors, primary and secondary, with their respective hex values. You can then use these colors in your HTML templates like so:

 class="bg-primary text-secondary">Hello, Tailwind!

Extending Utilities

Tailwind CSS provides a wide range of utility classes for common styles like padding, margin, and text alignment. However, you may find the need to create custom utilities for your project.

You can achieve this by extending the theme configuration with the extend property.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
      },
    },
  },
};

In the example above, we’ve added two custom spacing utilities, 72 and 84, with their respective values. You can then use these utilities in your HTML templates like so:

 class="p-72 m-84">Hello, Tailwind!

Extending Screens

Tailwind CSS provides a set of predefined breakpoints for responsive design, allowing you to create layouts that adapt to different screen sizes.

However, you may find the need to define custom breakpoints to better suit your project’s requirements. You can achieve this by extending the theme configuration with the extend property.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'xs': '640px',
      },
    },
  },
};

In the example above, we’ve added a custom screen size, xs, with a value of 640px. You can then use this custom screen size in your CSS classes to create responsive layouts tailored to your project’s needs.

 class="hidden xs:block">
  Lorem ipsum...

By extending screens in Tailwind CSS, you can define custom breakpoints that align with your project’s design requirements and create responsive layouts that adapt to various screen sizes.

Overriding Default Styles

Tailwind CSS provides a comprehensive set of utility classes for styling elements, but you may find the need to override or reset certain styles to better align with your project’s design system.

You can achieve this by customizing the theme configuration in your tailwind.config.js file.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
      fontSize: {
        '2xl': '1.5rem',
      },
      lineHeight: {
        relaxed: '1.6',
      },
    },
  },
};

In the example above, we’ve overridden the default font family, font size, and line height styles provided by Tailwind CSS. You can then use these custom styles in your HTML templates to create a consistent design system for your project.

By overriding default styles in Tailwind CSS, you can tailor the design system to match your project’s requirements and create a cohesive visual experience for users.

Using arbitrary values

While you can use the predefined utility classes in Tailwind CSS to style elements, there may be cases where you need to apply custom or arbitrary values to achieve a specific design requirement.

Tailwind CSS provides a way to use arbitrary values in utility classes using the square bracket notation.

Here’s an example of how you can use arbitrary values in Tailwind CSS:

 class="bg-[#bada55] mt-[12px] before:content-['Festivus']">
  Arbitrary Values

In the example above, we’ve used arbitrary values for the background color, margin, and pseudo-element content. By enclosing the values in square brackets, you can apply custom or arbitrary values to utility classes in Tailwind CSS.

Using arbitrary values in Tailwind CSS allows you to achieve precise design requirements and customize styles to fit your project’s unique needs, but it is recommended to use predefined utility classes whenever possible for consistency and maintainability.

The important modifier and the Exclamation Mark

In Tailwind CSS, the important option in the configuration file (tailwind.config.js) is a powerful tool for controlling the order of utility classes in the generated CSS output. It allows you to specify whether important utility classes should be prioritized over non-important ones.

The important option offers several benefits:

1. Control Over Specificity: By setting the important option to true, you can increase the specificity of utility classes, ensuring that they take precedence over other styles in the cascade.

2. Managing Overrides: The important option allows you to manage overrides more effectively by specifying which utility classes should be prioritized in the generated CSS output.

Here’s an example of how you can configure the important option in your Tailwind configuration:

// tailwind.config.js

module.exports = {
  important: true,
};

By setting the important option to true, you instruct Tailwind CSS to prioritize important utility classes over non-important ones in the generated CSS output.

Comparison with the Exclamation Mark (!)

Alternatively, you can manually apply the exclamation mark (!) to utility classes in your HTML markup to make them important. This approach overrides the default specificity rules and ensures that the specified styles take precedence.

 class="bg-red-500 !text-white">Important Text

By using the exclamation mark (!) in your utility classes, you can make specific styles important and ensure that they are prioritized in the cascade.

While both approaches achieve similar results by increasing specificity, there are some key differences to consider:

1. Global vs Granular Control: The important option in the configuration file provides global control over the importance of utility classes, while the exclamation mark (!) offers granular control at the class level.

2. Consistency vs Flexibility: Using the important option ensures consistency in the importance of utility classes across your project, while the exclamation mark (!) allows for more flexible and targeted overrides.

By understanding the important option and the exclamation mark (!), you can effectively manage the specificity of utility classes in Tailwind CSS and ensure that your styles are applied as intended.

Using prefixes to avoid conflicts

In Tailwind CSS, prefixes are a powerful feature that allows you to apply custom prefixes to utility classes, enabling namespace customization and avoiding conflicts with other CSS frameworks or libraries.

Benefits of using prefixes:

1. Namespace customization: Prefixes allow you to customize the namespace of Tailwind CSS utility classes, making it easier to integrate Tailwind with existing projects or other CSS frameworks.

2. Avoiding Class Name Conflicts: By adding prefixes to utility classes, you can prevent conflicts with similarly named classes from other CSS frameworks or libraries, ensuring a seamless integration experience.

Here’s an example of how you can define and use prefixes in your Tailwind configuration:

// tailwind.config.js

module.exports = {
  prefix: 'tw-', // Single prefix
  // Alternatively, you can use an array of prefixes
  // prefix: ['tw-', 'tailwind-'], // Example of using an array of prefixes
};

In the example above, we’ve defined a single prefix, tw-, to customize the namespace of Tailwind CSS utility classes. You can then use this prefix in your HTML templates to apply Tailwind styles with the specified prefix.

Adding Plugins

Tailwind CSS plugins allow you to extend the functionality of Tailwind CSS by adding new utilities, components, or features. You can install plugins via npm and add them to your tailwind.config.js file.

npm install @tailwindcss/typography

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
  ],
};

In the example above, we’ve added the @tailwindcss/typography plugin to enhance the typography utilities in Tailwind CSS. You can then use the new utilities provided by the plugin in your HTML templates.

Conclusion

In this article, we’ve covered various techniques and strategies to master Tailwind CSS customization. By customizing using the techniques we discussed, you can tailor Tailwind CSS to fit your unique needs.

Experiment with these techniques in your projects to create beautiful and performant stylesheets. Happy coding!

The post Mastering Tailwind CSS Customization appeared first on ProdSens.live.