什么是sns网站,网站建设与开发的软件,网络公司产品,红色系网站设计tailwindcss 介绍
Tailwind CSS 是一个流行的前端框架#xff0c;用于构建现代、响应式的网页和 Web 应用程序。它的设计理念是提供一组可复用的简单、低级别的 CSS 类#xff0c;这些类可以直接应用到 HTML 元素上#xff0c;从而加速开发过程并提高样式一致性。
主要特点…tailwindcss 介绍
Tailwind CSS 是一个流行的前端框架用于构建现代、响应式的网页和 Web 应用程序。它的设计理念是提供一组可复用的简单、低级别的 CSS 类这些类可以直接应用到 HTML 元素上从而加速开发过程并提高样式一致性。
主要特点如下
原子级别的 CSS 类: Tailwind CSS 的核心思想是将样式拆分为原子级别的类每个类都代表一个特定的样式属性例如 text-center 用于文本居中对齐bg-blue-500 用于设置背景颜色为蓝色。通过将这些类应用于 HTML 元素可以构建精确的样式。可配置: Tailwind CSS 允许你在配置文件中自定义样式属性以满足项目的需求。你可以定义颜色、字体、间距、边框等等以及响应式断点使样式能够根据屏幕大小适应。响应式设计: Tailwind CSS 支持响应式设计你可以根据不同的屏幕宽度应用不同的样式类。例如你可以使用 md:text-lg 类来指定在中等屏幕尺寸上使用较大的文本字号。插件系统: Tailwind CSS 具有丰富的插件生态系统你可以轻松地扩展框架的功能以满足项目的特定需求。这些插件可以用于添加自定义样式、工具类或组件。构建工具集成: Tailwind CSS 可以与构建工具如Webpack、Parcel、PostCSS无缝集成使你能够自动化构建过程并优化生产代码。社区支持: Tailwind CSS 拥有庞大的社区因此你可以轻松找到教程、文档、示例和第三方插件以帮助你更快地上手和开发。
Tailwind CSS 通过提供可复用的原子级别的 CSS 类简化了前端开发的样式管理使开发人员能够更高效地构建现代、响应式的用户界面。它适用于各种项目从小型网站到大型 Web 应用程序因为它提供了高度的灵活性和可定制性。
安装 tailwindcss npm install -D tailwindcss postcss autoprefixer
安装完成后在根目录执行初始化命令
npx tailwindcss init -p
// -p 代表配置
执行完成后可以看到如下目录 有如上两个文件生成代码成功 配置 tailwindcss
tailwind.config.js
原本 2.0 的 purge 在 3.0 改成 content
/** type {import(tailwindcss).Config} */
module.exports {content: [./index.html,./src/**/*.{vue,js,ts,jsx,tsx},],theme: {extend: {},},plugins: [],
}
style.css
将原本在 src/style.css 里面内容清空然后放入如下的 TailwindCSS 的核心内容这样可以避免再新建一个 index.css 在 main.ts 中引入因为 style.css 默认会引入到 main.ts 中
tailwind base;
tailwind components;
tailwind utilities;
测试使用效果
随便找一个 tsx 或 vue 的 模板文件这里以 tsx 为例子
import {defineComponent} from vue;
import Button from opentiny/vue-button
const HelloWorld defineComponent({
name: HelloWorld,setup() {},render() {return (div div classtext-center bg-gray-100 p-5p classtext-6xl text-red-700Hello!/ph1 classtext-4xl text-green-500Vite TailwindCSS/h1/div/div)}})export default HelloWorld然后执行 npm run dev 看效果就成功了 配置IDEA中自动提示 如果 idea 不提示 tailwindcss 的标签那么可以尝试将安装postcss的版本降低到2.1.4npm i tailwindcss/postcss7-compat2.1.4 --save
npm i tailwindcsslatest --save 此外插件市场记得安装下面的三个插件这样提示效果会更加全面 参考https://intellij-support.jetbrains.com/hc/en-us/community/posts/4403640816274-Vue-Tailwind-no-autosuggestions-in-WebStorm-
