用tailwincss让ul中的4个li平均占满屏幕

要使用Tailwind CSS让`<ul>`中的四个`<li>`元素平均占满屏幕宽度，你需要先安装并配置好Tailwind CSS，然后在CSS中设置一些基本样式。假设你的HTML结构如下：

<ul class="flex flex-300 p-4 rounded-lg">列表项1</li>
  <li class="bg-white border-gray-300 p-4 rounded-lg">列表项2</li>
  <li class="bg-white border-gray-300 p-4 rounded-4 rounded-lg">列表项4</li>
</ul>

在你的Tailwind CSS配置文件(`tailwind.config.js`)中添加以下内容以启用Flexbox和其他基础样式:

module.exports = {
  // 其他配置...
  purge: ['./src/**/*.{js,ts,jsx,tsx}', './public/index.html'],
  darkMode: false,
  theme: {
    extend: {},
    spacing: [6, 8, 12, 16, 24, 32, 48], // 添加自定义的间距单位
    colors: { ... }, // 颜色主题
    fontFamily: { ... }, // 字体系列
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/flex'),
    require('@tailwindcss/forms'), // 添加表单样式
  ],
};

然后运行`npm run tailwind`或`yarn tailwind`来生成CSS。

上述代码中：
- `flex` 和 `flex-wrap` 实现了列表的水平伸展，`items-center` 确保元素居中显示。
- `w-full` 设置列表宽度为100%，使其填充满屏幕。
- 每个`li`元素使用了圆角(`rounded-lg`)、背景颜色(`bg-white`)、边框(`border-gray-300`)和内边距(`p-4`)。