Integrating Tailwind css with Vuejs

Tailwind CSS is a styling framework that we configure with front-end frameworks for better UI. We can easily use classes and styles using Tailwind as inline styles or classes. When it comes to integration, similar to any other application, integrating Tailwind with Vue.js is also easy and follows almost the same process. Here’s how it… Continue reading Integrating Tailwind css with Vuejs

How to setup Tailwind CSS in Payload?

let’s add the Tailwind dependencies. npm install -D tailwindcss postcss autoprefixer And the init command can do the rest: npx tailwindcss init -p Now let’s edit the generated tailwind.config.js to add the content configuration for our files. /** @type {import(‘tailwindcss’).Config} */ export default {   content: [‘./src/**/*.{jsx,tsx}’], // tell tailwind where to look   theme:… Continue reading How to setup Tailwind CSS in Payload?

How to configure custom font family and animation width in tailwind css

The sample code is added below  theme: {   extend: {  fontFamily: {         OpenSans: ‘Open Sans’,         Poppins: ‘Poppins’,       },   keyframes: {         closeAnimation: {           ‘0%’: { maxHeight: ‘500px’ },           ‘100%’: {… Continue reading How to configure custom font family and animation width in tailwind css