要按组件基础生成Tailwind CSS输出，可以按照以下步骤进行：

1. 设置项目并安装Tailwind CSS：首先，创建一个新的项目文件夹，并在命令行中导航到该文件夹。然后，运行以下命令来初始化项目并安装Tailwind CSS：

npm init -y
npm install tailwindcss

2. 创建Tailwind CSS配置文件：在项目文件夹中创建一个名为tailwind.config.js的文件，并将以下内容添加到该文件中：

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

3. 创建组件文件夹：在项目文件夹中创建一个名为components的文件夹，用于存放组件相关的文件。

4. 创建组件文件：在components文件夹中创建一个名为Button.vue的文件，用作示例组件。在该文件中，添加以下代码：

5. 创建样式文件：在项目文件夹中创建一个名为styles.css的文件，用于存放全局样式。在该文件中，添加以下代码：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

6. 构建Tailwind CSS样式表：在命令行中运行以下命令，将styles.css文件编译为具体的CSS样式表：

npx tailwindcss build styles.css -o output.css

7. 使用组件：在项目的入口文件（如main.js）中引入output.css文件，以及示例组件Button.vue。然后，可以在应用程序中使用该组件。

import Vue from 'vue';
import './output.css';
import Button from './components/Button.vue';

Vue.component('Button', Button);

new Vue({
  el: '#app',
  render: h => h(App),
});

现在，你可以在应用程序中使用组件，并应用Tailwind CSS的样式。

这是一个简单的示例，展示了如何按组件基础生成Tailwind CSS输出。你可以根据自己的需要，在tailwind.config.js配置文件中添加自定义样式和变体，并在组件中使用它们。