Tailwind is "A utility-first CSS framework for rapidly building custom user interfaces", and it's not UI kit. So you need to build your own ui based on Tailwind css class.
For example, in bootstrap if we need to style button,
<button class="btn btn-primary">
Button
</button>
In Tailwind,
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
Button
</button>
Hmm, it's looks bootstrap win in this case. But wait, if you need customize button theme tailwind will win. Or you can see the button example in tailwind documentation site to see more case.
Vue + Tailwind + PurgeCSS
npm install tailwindcss @fullhuman/postcss-purgecss --save-devnpx tailwind init tailwind.jsmkdir src/assets/css-
touch src/assets/css/tailwind.cssfill with
@tailwind preflight;
@tailwind components;
@tailwind utilities;
- Edit
src/main.jsand import your tailwindcss
// Tailwind CSS
import '@/assets/css/tailwind.css'
By default, tailwind file size is bigger than bootstrap, you can see the explanation here. So we need PurgeCSS to remove unused css class in our production compiled css.
- Edit postcss.config.js
const tailwindcss = require('tailwindcss')
const autoprefixer = require('autoprefixer')
const purgecss = require('@fullhuman/postcss-purgecss')
class TailwindExtractor {
static extract (content) {
return content.match(/[A-Za-z0-9-_:\/]+/g) || []
}
}
module.exports = {
plugins: [
tailwindcss('./tailwind.js'),
autoprefixer({
add: true,
grid: true
}),
purgecss({
content: [
'./src/**/*.html',
'./src/**/*.vue',
'./src/**/*.js',
'./public/**/*.html'
],
extractors: [
{
extractor: TailwindExtractor,
extensions: ['html', 'vue', 'js']
}
]
})
]
}
Originaly posted on: My Blog Post
Top comments (0)