forsartis / Vue Cli Plugin Tailwind
Licence: mit
vue-cli plugin for Tailwind CSS
Stars: ✭ 154
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Vue Cli Plugin Tailwind
Tailwindcss Rtl
Enabling bidirectional support on tailwindcss framework
Stars: ✭ 118 (-23.38%)
Mutual labels: tailwindcss
Tailwindcss Filters
Tailwind CSS plugin to generate filter and backdrop filter utilities
Stars: ✭ 150 (-2.6%)
Mutual labels: tailwindcss
Todolist Frontend Vuejs
Front-end application for Todolist Web application built with Laravel and Vue.js
Stars: ✭ 120 (-22.08%)
Mutual labels: tailwindcss
Codrops Libre
A reponsive single page app template for collection management projects
Stars: ✭ 124 (-19.48%)
Mutual labels: tailwindcss
11st Starter Kit
11ty, powered by Snowpack with Tailwind CSS and Alpine.js.
Stars: ✭ 141 (-8.44%)
Mutual labels: tailwindcss
Vue Telescope Analyzer
Detect Vue technologies running on a website ✨
Stars: ✭ 117 (-24.03%)
Mutual labels: tailwindcss
React Webpack 5 Tailwind 2
React 17 Boilerplate with Webpack 5, Tailwind 2, using babel, SASS/PostCSS, HMR, dotenv and an optimized production build
Stars: ✭ 155 (+0.65%)
Mutual labels: tailwindcss
Xstyled
A utility-first CSS-in-JS framework built for React. 💅👩🎤⚡️
Stars: ✭ 1,835 (+1091.56%)
Mutual labels: tailwindcss
React Laravel Boilerplate
A Laravel REST API backend with React/Redux, hot module reloading in development and route-level code splitting
Stars: ✭ 146 (-5.19%)
Mutual labels: tailwindcss
Components
Fully responsive and beautiful HTML components made with VueJS and TailwindCSS.
Stars: ✭ 121 (-21.43%)
Mutual labels: tailwindcss
Fama
TailwindCSS based personal branding template. Built with react and framer-motion
Stars: ✭ 121 (-21.43%)
Mutual labels: tailwindcss
Notus Svelte
Notus Svelte: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 144 (-6.49%)
Mutual labels: tailwindcss
Eleventy Starter
ARCHIVED: An Eleventy starting point with Tailwind and Svelte preconfigured.
Stars: ✭ 118 (-23.38%)
Mutual labels: tailwindcss
Figmatocode
Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.
Stars: ✭ 2,299 (+1392.86%)
Mutual labels: tailwindcss
Tailwindcss Grid
Brings grid support to Tailwind CSS
Stars: ✭ 116 (-24.68%)
Mutual labels: tailwindcss
Wp Tailwind
A WordPress starter theme that utilizes Tailwind + PurgeCSS.
Stars: ✭ 135 (-12.34%)
Mutual labels: tailwindcss
Notus Nextjs
Notus NextJS: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 152 (-1.3%)
Mutual labels: tailwindcss
Sage
WordPress starter theme with a modern development workflow
Stars: ✭ 11,531 (+7387.66%)
Mutual labels: tailwindcss
vue-cli-plugin-tailwind
A plugin that adds Tailwind CSS to your vue-cli project.
Getting started
Inside your vue-cli project folder add the plugin via:
vue add tailwind
Choose what Tailwind config you want to generate:
- none - Won't create a config file. Useful if you already have a config (make sure to configure PurgeCSS).
-
minimal (default) - Will create a minimal
tailwind.config.js
file where you can define your customizations. -
full - Will generate a
tailwind.config.js
file containing the entire default configuration.
See Tailwinds configuration guide for more info.
PostCSS Configuration
Tailwind CSS will be added as plugins in your PostCSS config.
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Custom Tailwind config file name
If you use a name other than tailwind.config.js
for the Tailwind config file, you will need to specify it in your PostCSS configuration.
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: 'custom-name.js',
//...
},
};
Configure PurgeCSS
By default PurgeCSS will look for css selectors in your .html
files inside the ./public
directory and .vue
files inside the ./src
directory.
purge: {
content: ['./public/**/*.html', './src/**/*.vue']
},
Check https://tailwindcss.com/docs/optimizing-for-production for more info.
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].