DEV Community: Tailus

Atom : The most customizable free Astro landing page

Méschac Irung — Tue, 02 Apr 2024 13:26:07 +0000

Unleash the potential of your project with a website designed for impact. Showcase your innovative tech tool with intuitive simplicity and elegance.

Atom is built with meticulous attention to detail as your creation and features a trendy and modern design look and feel to make your website standout.

Above all, Atom is entirely free, offering a premium template experience at no cost.

Screenshots

Make it yours with ease

Change colors, shadows, border radius, border and background contrast easily.

Ready to unlock the potential of Atom ?

Get your copy now

Ada: The most beautiful free Tailwind Css landing page template

Méschac Irung — Sat, 09 Mar 2024 09:26:56 +0000

Ada is a contemporary, free landing page HTML template designed with meticulous attention to detail and a modern aesthetic.

Ideal for startups, SaaS businesses, and open-source projects, Ada boasts a polished and sophisticated interface that elevates your brand with its clean, modern layout and thoughtful design.

Experience the difference:

Refined shadows and borders for a touch of elegance.
Carefully structured layout and sections for optimal user experience.
Versatile design adaptable to diverse projects.

Support Dark Mode

Adapts to your user's system preferences

Make it yours with ease

Change colors, shadows, border radius, border and background contrast easily.

Ready to unlock the potential of Ada ?

Get your copy now

New accordion component

Méschac Irung — Thu, 15 Feb 2024 04:59:40 +0000

According to WAI (Web Accessibility Initiative), an accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.

The most common use is to create the frequently asked questions (FAQ) section.

The Accordion in Tailus UI React has 6 variants, giving you more options as to how you want the accordion to look.

Learn more about the Accordion component Here

How to create gradient borders with tailwindcss

Méschac Irung — Mon, 10 Jul 2023 16:08:20 +0000

Gradient borders are a great way to add visual interest and depth to a website. They can be used to highlight important elements, create a sense of movement, or simply make a website look more stylish.

Here are few steps to to create gradient borders with tailwindcss.

1. Create a container

Create a div element, add rounded-3xl and p-px utilities to it. Note that you can use an other border radius utility and padding, visually, the padding will be seen as the size of the border.

<div class="rounded-3xl p-px"></div>

2. Add a gradient background to the container

<div class="rounded-3xl p-px bg-gradient-to-b from-gray-200 to-transparent"></div>

If your card is over a blury background, you should play with opacity to get a better look.

Example : from-gray-950/40

3. Create an other container inside the parent container

<div class="rounded-3xl p-px bg-gradient-to-b from-gray-200 to-transparent">
    <div class="bg-gray-50 p-10">

    </div>
</div>

4. Add a custom border radius to the child container

As the parent container has a border radius, you have to add some to the child container to get a perfect rounded border.

Use this formula to get the border radius of the child container :

Child container border radius = (parent container border radius) - (parent container padding).

For example, if the parent container border radius is 10px and the parent container padding is 2px, then the child container border radius would be 10px - 2px = 8px.

To calculate, use the css calc function to get the exact border radius of the child container.

You can calculate in your head, but using the 'calc' function allows you to obtain the result even when you don't know the padding or border radius of the parent container, as may be the case when using css variables.

*The css rule should look like this : *

.child-container {
  border-radius: calc(3.5rem - 1px);
}

Arbitrary value

Use an arbitrary value to apply the formula to the tailwind css rounded utility.

<div class="rounded-3xl p-px bg-gradient-to-b from-gray-200 to-transparent">
    <div class="bg-gray-50 p-10 `rounded-[calc(1.5rem-1px)]`">

    </div>
</div>

5. Add content to your card

<div class="rounded-3xl p-px bg-gradient-to-b from-gray-200 to-transparent">
    <div class="bg-gray-50 p-10 rounded-[calc(1.5rem-1px)]">
      <p class="text-gray-700 dark:text-gray-300">I absolutely 
love Tailus! The component blocks are beautifully designed and easy to use, which makes creating a great-looking website a breeze.
      </p>

      <div class="mt-8 flex gap-4 items-center">
        <img class="h-12 w-12 rounded-full" src="https://pbs.twimg.com/profile_images/1599029039297077249/p0znhFdE_400x400.jpg" alt="" />
        <div>
          <h3 class="text-lg font-medium text-gray-700 dark:text-white">Oketa Fred</h3>
          <span class="text-sm tracking-wide text-gray-600 dark:text-gray-400">Fullstack Developer</span>
        </div>
      </div>
    </div>
</div>

Congratulations, you've created gradient borders using tailwind css!

You can use this technique to craft a variety of gradient borders with different colors, gradient styles, and border radii. This approach adds visual interest and depth to your website while maintaining a clean, modern aesthetic.

More Tips

Want to take your TailwindCSS skills to the next level? Tailtips is packed with actionable tips and tricks to help you build better, faster, and smarter with TailwindCSS. From creative solutions like gradient borders to advanced techniques and best practices, Tailtips has everything you need to master TailwindCSS.

Discover Tailtips

How to use Tailwind CSS in a React project.

Théo Balick — Mon, 03 Jul 2023 15:45:35 +0000

1. Introduction

Web design is a hot topic these days, and with the constant evolution of technology and design trends, there are always new techniques, tools and best practices to learn. And among all the methods or means of creating websites that exist, two tools have come to the fore in recent years when it comes to interface creation and design technologies. These are React and tailwind css. It's often difficult at first to get started with or use both in the same project. In this article, I'll explain how to use tailwind css in a react project.

As a reminder, React is an open-source JavaScript library developed by Facebook to create user interfaces. And Tailwind CSS is a framework that focuses on utility, allowing you to write utility classes directly in your html tags. Handy if you want to save time and be productive!

Are you ready? Let's go 😊🥰

Note: You must have node js installed on your machine. If you don't, here's the link to download it: https://nodejs.org/fr/download
You can check whether node is installed on your computer by typing the following command in the terminal: $ node --version

In my case, for example, node is well installed and I'm using version 18.13.0. The version may be different depending on when you installed node js on your machine.

Before you start, you need to initialize your react project. If you already have your React project and simply want to add tailwind css to your existing project, you can go straight to the "Adding tailwind css to your project" section.
Here's how to do it: 👇👇👇👇

2. Create a react project

The quickest way to do this is with the create-react-app tool, which already comes with all the necessary configurations for a React project by default.

#1. Initialize your react project

Go to the folder where you want to initialize your React project, open the command line and type the following command: npx create-react-app my-app where my-app is the name of your project. In my case, I'm going to create a project called demo-react-tailwind:

npx create-react-app demo-react-tailwind

#2. Move into your project

cd demo-react-tailwind

#3. start the development server

npm start

After typing the npm start command, the console will display a message telling you that all has gone well, and the development server will be launched on port 3000. The port may be different, but if you get a message similar to mine, it means that all went well.

Now you can go to your browser and navigate to the local address displayed in the console. In my case, it's http://localhost:3000
You should get the following page:

That's it, you've just created your React project! Finally 😊🥰🤩
Your structure should look like this:

If you'd like to know more about the create-react-app tool, visit the following link: https://create-react-app.dev/

2. Add Tailwind css to the project

To add Tailwind to your project, follow the steps below:

#1. Install Tailwind CSS

In your project, open the terminal and type the following command:

npm install -D tailwindcss

#2. Generate configuration file

Tailwind css works with a configuration file. To generate it, type the following command in your terminal:

npx tailwindcss init

Check your directory and see if the configuration file has been added.

The file generated must be the same as the one on the image:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

#3. Configure your template paths

In your configuration file, you need to add the paths of all your files that use tailwind styles so that the compiler can recognize the styles. For example:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

#4. Add the Tailwind directives to your CSS

Once the last step is done, you need to add the tailwind directives to your css file.

Note: Directives must be added at the beginning of the file, otherwise it won't work! 😱😱😩😭

@tailwind base;
@tailwind components;
@tailwind utilities;

/* rest of code */

Now you can use tailwind in your React project. 🥰🎉✨

#5. Start using Tailwind in your project

Now we'll test it to see if it works. In the App file in the src folder, try changing the color of the paragraph text.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p className='text-lime-600'> {/* change this line */}
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

And here's the result: the text has changed from white to Lime:

If you'd like to see the full code, here's the link: https://github.com/Balick/basic-react-tailwind-boilerplate

Note: If you want to use the full power of Tailwind css, a recommended tool called PostCSS is recommended.
Unfortunately, Create React App does not support custom PostCSS configurations and is incompatible with many important tools in the ecosystem. A solution to this problem would be to use Vite, Parcel or Next.js, for example. They offer a more flexible development experience, giving you more control over how Tailwind and PostCSS are configured.

We'll talk about it in a future article. We'll talk about it in a future article 😊😊🤗🤗

How to create a text gradient with tailwindcss

Méschac Irung — Wed, 04 Jan 2023 10:10:06 +0000

Text gradients can be a useful and visually appealing element of modern UI design, as they can add depth and interest to text and help it stand out on the page. However, it's important to use them sparingly and in a way that complements the overall design of your interface. Overuse of text gradients or using them in a way that is hard to read or not harmonious with the rest of the design can negatively impact the user experience.

In general, it's a good idea to consider the readability and legibility of your text when using gradients or other decorative effects. If the text is difficult to read or understand, it will not matter how visually appealing the gradient is.

Overall, text gradients can be a useful tool in modern UI design when used judiciously and in a way that enhances the user experience.

In this article, we'll cover how to create a gradient title using Tailwind CSS utilities.

First create a `h1` tag and give it a content

<h1>Gradient title</h1>

After creating a title, let's add some utilities to change our h1 size and weight :

<h1 class="text-5xl font-bold">Gradient title</h1>

Add `bg-clip-text` utility

The bg-clip-text utility refers to the background-clip property in CSS, it determines the area within which the background color or image of an element is applied. It is used to clip the background image or color of an element and needs the content text to paint the background to our title or any other text.

<h1 class="text-5xl font-bold bg-clip-text">Gradient title</h1>

After that, add text-transparent so that only the background will be applied as text color.

<h1 class="text-5xl font-bold bg-clip-text text-transparent">Gradient title</h1>

Add gradient

Your result should be blank right now as we added text-transparent class, Now we need to add gradient background utilities to our title to see our gradient applied as text color.

<h1 class="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-500">Gradient title</h1>

Now our title should look like :

You can add your brand's colors to make it fit with the rest of your UI elements.

More Tips

Discover Tailtips

Modern UI ressources built on top of Tailwindcss

Méschac Irung — Sun, 04 Dec 2022 16:22:46 +0000

Yesterday we released Tailus v2, and it's a set of Easy to customize UI Blocks, VS Code Snippets, and complete and modern Templates that are easy to customize and support light and dark mode, built on top of tailwindcss.

A few developers have tested these resources and given us great feedback (which you can find on our homepage). That's why I wanted to share this with you.

50+ Blocks

As an existing ressource, we brought major changes to our blocks :

Complete redesign to make them look modern and fit with others.
Support for dark and light mode

VS Code Snippets

To make your life even easier, we built a VS Code extension that allows you to use some of our components in your html file without copying them from the browser.

After installing the extension, all that you have to do is to type in your html :tailus-"name of component", ex : tailus-card and see a list of modern cards snippets that you can use.

Install now

Modern templates

That's not all as we have also designed two modern templates, one of which is complete with 13 pages (light and dark mode) to allow you to create an out of the box website for an innovative Sass or business.

Some screenshots :

And more...

What's next ?

I wrote this article to let you discover these ressources that you can use in your next tailwindcss project to make your ideas stand out.

Let me know what you think about all of the above, in the comments.

Find everything here

Blocks
Snippets
Templates

How to build a custom file input with tailwind css

Méschac Irung — Fri, 02 Dec 2022 18:21:47 +0000

"<input> elements with type="file" let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission, or manipulated using JavaScript code and the File API". Source : MDN

And looks like this by default :

Styling the file input is easier than it seems to be, actually you can't really design a modern looking file input by applying utilities directly to the input:file element itself (If exists any way, let me know in the comments).

In this article, I will guide you step by step to building a simple modern looking file input using Tailwind Css.

Nest the input tag into the label tag

You can use label and input tags as peer elements into a div but I prefer nesting the input tag into the label to avoid using a div tag, you have the same result for both ways of doing.

<label for="doc">
   <input type="file" id="doc" name="doc" hidden/>
</label>

The for attribute of the label tag have to have the same content as the id attribute of the input tag so that the input action can be trigged by pressing the label element.

You need to hide the input element using hidden attribute or the "hidden" tailwind css utility as you don't need it to appear on the screen.

Adding other content

Right here you shouldn't have anything on your screen, you need to add an illustration icon, a short title and a description to your component.

<label for="doc">
   <img src="https://demo.tailus.io/images/icons/upload.webp" alt="upload icon" width="512" height="512" />
   <div>
      <h4>Upload a file</h4>
      <span>Max 2 MO </span>
   </div>
   <input type="file" id="doc" name="doc" hidden/>
</label>

It should look like this now :

Right now you only wrote html, let's add some tailwind css utilities to style the component.

Adding tailwind css utilities

You need to add border, rounded corners and a background to the label tag, the illustration is bigger than it should be, you need to align the image and the div tag containing the title and the description in the same row...

Add some tailwind css utilities to the elements to have the needed result :

<label for="doc" class="flex items-center p-4 gap-3 rounded-3xl border border-gray-300 border-dashed bg-gray-50 cursor-pointer">
   <img class="h-16 w-auto" src="https://demo.tailus.io/images/icons/upload.webp" alt="">. 
   <div class="space-y-2">
      <h4 class="text-base font-semibold text-gray-700">Upload a file</h4>
      <span class="text-sm text-gray-500">Max 2 MO</span>
   </div>
   <input type="file" id="doc" name="doc" accept="png, jpg" hidden/>
</label>

And voila, you should have the file input component looking like in the article cover.

Conclusion

This is how I create a custom file input with tailwind css, there is still different ways of doing to have the same result, you can go even far with JavaScript by adding more behaviors.

More Tips

Discover Tailtips

Apply tailwindcss classes to child elements via the parent.

Méschac Irung — Tue, 15 Nov 2022 09:20:52 +0000

Apply tailwindcss classes to child elements via the parent

Méschac Irung — Mon, 14 Nov 2022 12:38:27 +0000

Doing the same thing all the time is boring !

This often happens when you have to apply the same style to child elements with the same function, if you want to change something, you have to do it individually for each element.

Fortunately today's css allows us to write selectors that can make it easier for us to manage the style of child elements through their parent, and in this article we are going to find out how to do it with tailwindcss.

To show you the relevance of applying tailwindcss utilities to child elements via the parent, I will guide you in building a simple card by focusing on user avatars where you will apply a custom variant.

Watch video

Common use

What we often do is to add tailwindcss utilities to each child element :

<img class="h-14 w-14 rounded-full ring-4 ring-white object-cover duration-300 hover:ring-blue-100" src="" alt="" />

This is a natural way of applying css classes to an element but you probably know that adding a lot of classes can make your html difficult to read and repetitions are boring to see. We are used to this because of tailwindcss and can't complain about it when you know the advantages it provides.

My avatars stacked list will look like

<div class="flex -space-x-2">
   <img class="h-14 w-14 rounded-full ring-4 ring-white object-cover duration-300 hover:ring-blue-100" src="" alt="" />
   <img class="h-14 w-14 rounded-full ring-4 ring-white object-cover duration-300 hover:ring-blue-100" src="" alt="" />
   <img class="h-14 w-14 rounded-full ring-4 ring-white object-cover duration-300 hover:ring-blue-100" src="" alt="" />
   <img class="h-14 w-14 rounded-full ring-4 ring-white object-cover duration-300 hover:ring-blue-100" src="" alt="" />
   <img class="h-14 w-14 rounded-full ring-4 ring-white object-cover duration-300 hover:ring-blue-100" src="" alt="" />
</div>

There is still ways to limit repetitions in your html when using tailwindcss : Creating a component css class with the @apply directive to group all the utilities, or using JavaScript Frameworks like Angular, React, Vue, Svelte… to build custom components.

I prefer adding all utilities to an element and I sometimes don't use a Frontend framework so the efficient way to limit repetitions when building the avatars stacked list of my card will be to apply all classes to the <img src="" /> tag via the parent element.

In css we'd basically use this selector :

.avatars>*{
   width :3.5rem;
   height : 3.5rem;
}

Arbitrary variant

One of the best features of tailwindcss is the ability to add values or selectors that are not by default in the framework directly in your html so you don't need to write css no more.

Applying this with tailwindcss will look like :

<div class="[&>*]:w-14 [&>*]:h-14"> </div>

And the whole list should be :

<div class="flex -space-x-2 [&>*]:h-14 [&>*]:w-14 [&>*]:rounded-full [&>*]:ring-4 [&>*]:ring-white [&>*]:object-cover [&>*]:duration-300 hover:[&>*]:ring-blue-100">
   <img src="" alt="" />
   <img src="" alt="" />
   <img src="" alt="" />
   <img src="" alt="" />
   <img src="" alt="" />
</div>

Like me you would certainly get tired of seeing the [&>*] arbitrary variant and a readable name will make easier to use and reuse.

Create a custom variant

To fix this, create a custom variant with a readable name that you will use instead of [&>*].

You need to do this in your tailwind.config.js

To get started import Tailwind’s plugin function from tailwindcss/plugin.

const plugin = require('tailwindcss/plugin');

const plugin = require('tailwindcss/plugin');

module.exports = {
  theme: {
    extend: {
      // ...
    },
  },
  plugins: []
}

After importing the plugin function you can now create the custom variant inside the plugins array. Call the addVariant function, passing in the name "children", and a format string &>* that represents how the selector should be modified.

const plugin = require('tailwindcss/plugin');

module.exports = {
  theme: {
    extend: {
      // ...
    },
  },
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('children', '&>*')
    })
  ]
}

Now you can replace the [&>*] arbitrary by the custom variant you have just created in the config file.

The html should now look like :

<div class="flex -space-x-2 children:h-14 children:w-14 children:rounded-full children:ring-4 children:ring-white children:object-cover children:duration-300 hover:children:ring-blue-100">
   <img src="" alt="" />
   <img src="" alt="" />
   <img src="" alt="" />
   <img src="" alt="" />
   <img src="" alt="" />
</div>

Conclusion

This way of doing can make your html less difficult to read because it prevents from repeating again and again the same utilities to the child elements that have the same function and designed the same.

More Tips

Discover Tailtips

DEV Community: Tailus

Atom : The most customizable free Astro landing page

Screenshots

Make it yours with ease

Ada: The most beautiful free Tailwind Css landing page template

Support Dark Mode

Make it yours with ease

New accordion component

How to create gradient borders with tailwindcss

1. Create a container

2. Add a gradient background to the container

3. Create an other container inside the parent container

4. Add a custom border radius to the child container

Arbitrary value

5. Add content to your card

More Tips

How to use Tailwind CSS in a React project.

1. Introduction

2. Create a react project

2. Add Tailwind css to the project

How to create a text gradient with tailwindcss

First create a h1 tag and give it a content

Add bg-clip-text utility

Add gradient

More Tips

Modern UI ressources built on top of Tailwindcss

50+ Blocks

VS Code Snippets

Modern templates

What's next ?

How to build a custom file input with tailwind css

Nest the input tag into the label tag

Adding other content

Adding tailwind css utilities

Conclusion

More Tips

Apply tailwindcss classes to child elements via the parent.

Apply tailwindcss classes to child elements via the parent

Common use

Arbitrary variant

Create a custom variant

Conclusion

More Tips

First create a `h1` tag and give it a content

Add `bg-clip-text` utility