`How to use tailwind css in your project?`

All contents base on tailwind 3.4.1, and this is my GitHub Repository.

Happy news, You can visit my deploy website here

Prerequisite

Learn Background

First I learned a basic css course given by Dave Gray(Thanks for you), second the thought throw out when I learning, I can rewrite this by other technology that html replace by vue and ts, css replace by tailwind css.

So this article the summary to record all of the key point, you will get great beneficial from here.

Install Tailwind Css

If you wanna initiate a new project, you can read this article, then install the tailwind Css by reading this tutorial.

Also you can skip all steps above, just execute the following command,

pnpm install -D tailwindcss postcss autoprefixer
pnpm install -D postcss-nesting
pnpm install -D postcss-preset-env
pnpm install -D autoprefixer
# this will use postcss-preset-env to compile css
pnpm install -D cssnano postcss 
# this will initiate will create typescript config file
pnpx tailwindcss init -p --ts
# also you can execute without --ts will create js config file
pnpx tailwindcss init -p 

Tailwind Usage

I will skip most simple usage, you can look up in official site.

`margin-bottom`

If you wanna define margin-bottom space, custom definition is below,

.mb-4 {
    margin-bottom: 1rem/* 16px */;
}

All essay will omit basic css used in html.

the tailwind css,

<div class="mb-4">
      <!--  ... -->
</div>

another more complicated case, if wanna declare a space with a clamp function,this clamp(1em, 2.5vh, 1.5em) 0 is setting a margin for an element that will vary between 1em and 1.5em, with a preference for 2.5vh and an initial margin of 0. The actual margin will depend on the viewport size and how it fits within the specified range.

2.5vh is equivalent to 2.5% of the viewport height. It's a responsive unit that adjusts based on the height of the user's viewport (the visible area in the browser).

custom css

.mb-clamp {
    margin-bottom: clamp(1em, 2.5vh, 1.5em) 0;
}

tailwind css

<div class="m-[clamp(1em,2.5vh,1.5em)_0] ">
      <!--  ... -->
</div>

`text-shadow`

custom css

.custom-shadow {
    text-shadow: 2px 2px 5px #333;
}

tailwind css

<div class="[text-shadow:2px_2px_5px_#333]">
      <!--  ... -->
</div>

`font-family`

If you wanna set font family, custom Css is below

.custom-font-family {
    font-family: Fugaz One, cursive;
}

In tailwind css, you need put config into you tailwind.config.ts

export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
        headings: ['Fugaz One', 'cursive'],
      },
    },
  },
  plugins: [],
} satisfies Config

and use in html,

<div class="font-headings">
      <!--  ... -->
</div>

`border`

The custom border composite css

.div {
  border: 1px solid #999;
}

but there is not composite tailwind css style, define by sevaral field

<div class="border-solid border border-black"></div>

`animate`

This custom css define a animate, from top -100px down the window.

.hero__h2 {
    top: -100px;
    animation: showWelcome 0.5s ease-in-out 1s forwards;
}

@keyframes showWelcome {
    0% {
        top: -20px;
        transform: skew(0deg, -5deg) scaleY(0);
    }

    80% {
        top: 30px;
        transform: skew(10deg, -5deg) scaleY(1.2);
    }

    100% {
        top: 20px;
        transform: skew(-10deg, -5deg) scaleY(1);
    }
}

In tailwind css, you need put config into you tailwind.config.ts

export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']
  theme: {
    extend: {
      keyframes: {
        showWelcome: {
          '0%': {
            top: '-20px',
            transform: 'skew(0deg, -5deg) scaleY(0)',
          },

          '80%': {
            top: '30px',
            transform: 'skew(10deg, -5deg) scaleY(1.2)',
          },

          '100%': {
            top: '20px',
            transform: 'skew(-10deg, -5deg) scaleY(1)',
          },
        },
      },
    },
  },
  plugins: [],
} satisfies Config

use animate in html

<div class="animate-[showWelcome_0.5s_ease-in-out_1s_forwards]">
      <!--  ... -->
</div>

pseudo `first-child` and `last-child`

custom css

.main__article:first-child {
    margin-top: 1em;
}

.main__article:last-child {
    min-height: calc(100vh-20rem);
}

tailwind css

<div class="first:mt-4 last:min-h-[calc(100vh-20rem)]">
      <!--  ... -->
</div>

Style an element if it’s the first child of its type using the first-of-type modifier, you need define this way.
<div class="first-of-type:mt-4 last-of-type:min-h-[calc(100vh-20rem)]">
      
</div>
and be careful with the function usage, must not contains blank in last-of-type:min-h-[calc(100vh-20rem)], if you really wanna add, just use last-of-type:min-h-[calc(100vh_-_20rem)] instead of last-of-type:min-h-[calc(100vh - 20rem)].

pseudo `before` and `after`

use pseudo before or after custom css add some content, custom css

.header__h1::before {
    content: '🌮 '
}

.header__h1::after {
    content: ' 🌮'
}

tailwind css

<div class="before:content-['🌮'] after:content-['🌮']">
      <!--  ... -->
</div>

'🌮' must need single quote** ,🌮 will does not work.

`@media` query

custom css

@media screen and (min-width: 576px) {
    .header__h1::before {
        content: '🌮 '
    }

    .header__h1::after {
        content: ' 🌮'
    }

    .menu__header,
    .menu__cr,
    .menu__sf,
    .menu__cs {
        font-size: 125%;
    }
}

use in tailwind css

<div class="min-[576px]:before:content-['🌮'] min-[576px]:after:content-['🌮']">
      <!--  ... -->
</div>

It look more concise, I like this.

text color opacity

directly use text-black/[.6] instead of text-[rgba(0, 0, 0, 0.6)], because it doesn't support yet.

If the color is rgba(52, 178, 52, 0.75),first you should convert it to hex color, then use text-[#34b234bf].

Here give a example, custom css

.header__h1 {
    color: rgba(52, 178, 52, 0.75);
}

tailwind css

<div class="text-[#34b234bf]">
      <!--  ... -->
</div>

`text-shadow`

custom css,

:root {
    --BORDER-COLOR: #333;
}

@media (prefers-color-scheme: dark) {
    :root {
        --BORDER-COLOR: whitesmoke;
    }
}

.hero__h2 {
    text-shadow: 2px 2px 5px var(--BORDER-COLOR);
}

tailwind css,

<div class="[text-shadow:2px_2px_5px_#333] dark:[text-shadow:2px_2px_5px_white]">
      <!--  ... -->
</div>

`box-shadow`

custom css

:root {
    --BORDER-COLOR: #333;
}

@media (prefers-color-scheme: dark) {
    :root {
        --BORDER-COLOR: whitesmoke;
    }
}

body {
    box-shadow: 0 0 10px var(--BORDER-COLOR);
}

tailwind css,

<div class="shadow-[0_6px_5px_-5px_#333] dark:shadow-[0_6px_5px_-5px__whitesmoke]">
      <!--  ... -->
</div>

sometimes you can define in seperate way, more details plz check here,

and below I give a tailwind css example in react, relative style shadow-lg shadow-cyan-500/50 opacity-85, define box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

and border color, box opacity.

<div className="text-center text-2xl font-bold mt-4 p-2 border border-purple-400 border-solid shadow-lg shadow-cyan-500/50 bg-cyan-500 opacity-85">
  {tips}
</div>

Problems Fix

Picture not display

I used static picture in my vue file, once I deploy to github page picture disappear, because vite don't include the png in src/assets/img/tacos_delicioso_1000x667.png, I check the solution on the vite official website, both of this ways below works, just choose one you prefer. Here is solution of commit change.

First method

const img = new URL('@/assets/img/tacos_delicioso_1000x667.png', import.meta.url).href

Second method

// but this will get a error hint, so I prefer to the first method
// Cannot find module '@/assets/img/tacos_and_drink_1000x667.png' or its corresponding type declarations.
import img from '@/assets/img/tacos_delicioso_1000x667.png'

My page lost all the styles

Because of making mistake in postcss.config.js, I delete the line tailwindcss: { config: './tailwind.config.ts' },;

You can see the official guide, Here is solution of commit change.

module.exports = {
  plugins: {
    // config location, defaullt is tailwind.config.js,here must indicate the file name
    tailwindcss: { config: './tailwind.config.ts' },
    autoprefixer: {},
    cssnano: {},
    // nest css
    'tailwindcss/nesting': 'postcss-nesting',
    'postcss-preset-env': {
      features: { 'nesting-rules': false },
    },
    // optimizing for production, compres css
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
  },
}

Conclusion

Almost 20-days learning and rewriting this project, maybe the project is too small, but I have learned a lot about tailwind css, vue acknowledge. I wish you move on, you will find unlock fashioned tailwind css.

Thank you for your time. If my article helps you, please give it a clap. Also feel free to ask any questions you may have.

Prerequisite​

Learn Background​

Install Tailwind Css​

Tailwind Usage​

margin-bottom​

text-shadow​

font-family​

border​

animate​

pseudo first-child and last-child​

pseudo before and after​

@media query​

text color opacity​

text-shadow​

box-shadow​

Problems Fix​

Picture not display​

My page lost all the styles​

Conclusion​

Prerequisite

Learn Background

Install Tailwind Css

Tailwind Usage

`margin-bottom`

`text-shadow`

`font-family`

`border`

`animate`

pseudo `first-child` and `last-child`

pseudo `before` and `after`

`@media` query

text color opacity

`text-shadow`

`box-shadow`

Problems Fix

Picture not display

My page lost all the styles

Conclusion