How to Skew a Button in Tailwind CSS?

Last Updated : 08 Oct, 2024

Skewed buttons can add a dynamic and modern look to your website, Tailwind CSS provides utility classes to easily apply 2D transformations like tilt, rotation, and scaling, we'll explain how to tilt, buttons using Tailwind CSS and create a simple project to demonstrate this.

Approach To Skew A Button

Decide on the button you want to skew in your UI. This could be a standard HTML button or a custom-styled button.
Implement the transform property with the skew function. You can specify angles for the skew along the X or Y axes (e.g., skew(-10deg) for X-axis skew).
Check how the skewed button looks on different screen sizes. You might want to use media queries to adjust the skew or other styles based on the viewport.
Test the button in your design. Make adjustments to the skew angle or styles based on feedback or design requirements.

Steps To Skew A Button

Step 1: Create a New Project

mkdir tailwind-skew-button-gfg
cd tailwind-skew-button-gfg
npm init -y

Step 2: Install Tailwind CSS

npm install tailwindcss postcss autoprefixer
npx tailwindcss init

Step 3: Configure Tailwind CSS

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

Step 4: Add Tailwind Directives to CSS

Create a new src/index.css file and add the following Tailwind directives.

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

Step 5: Build the Tailwind CSS File

npx tailwindcss -i ./src/index.css -o ./dist/output.css --watch

It will create CSS that compiles as dist/output.css.

Project Structure:

Updated Dependencies:

{
    "name": "tailwind-skew-button-gfg",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": "",
    "dependencies": {
        "autoprefixer": "^10.4.20",
        "postcss": "^8.4.47",
        "tailwindcss": "^3.4.13"
    }
}

Example: In this example create a src/index.html file with a simple button. Here we are using Tailwind's skew-x-12 class to skew the button by 12 degrees on the X-axis, you can adjust the degree of skew by changing the number (e.g., skew-x-6, skew-x-3, etc.)