初始化Html5、Tailwindcss和Alpinejs的方案

发表时间: 2021-05-24 12:14

一. 安装好 nodejs+yarn

二. 新建目录 demo（可自定义)

三. 安装 Tailwind

yarn add tailwindcss@latest postcss@latest autoprefixer@latest

四. 创建配置文件

#创建配置文件 tailwind.config.js and postcss.config.jsnpx tailwindcss init -p

五. 创建css目录用来存放样式，在css下新建tailwind.css,内容如下：

/* ./css/tailwind.css */@tailwind base;@tailwind components;@tailwind utilities;

六. 定制颜色。修改配置文件tailwind.config.js，增加系统自带的颜色

const colors = require('tailwindcss/colors')module.exports = {   purge: [],   darkMode: false, // or 'media' or 'class'   theme: {       extend: {},       colors: {           // Build your palette here           gray: colors.trueGray,           red: colors.red,           blue: colors.lightBlue,           yellow: colors.amber,           orange: colors.orange,           amber: colors.amber,           lime: colors.lime,           green: colors.green,           emerald: colors.emerald,           cyan: colors.cyan,           lightBlue: colors.lightBlue,           indigo: colors.indigo,           white: colors.white,           black: '#000',       }   },   variants: {       extend: {},   },   plugins: [],}

七. 编译及生成css文件

npx tailwindcss-cli@latest build css/tailwind.css -o css/style.css

八. 安装 alpine.js. 简介及说明：
https://github.com/alpinejs/alpine/blob/master/README.zh-CN.md

yarn add alpinejs

九. 生成 index.html，配置引用css及js。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <link rel="stylesheet" href="css/style.css">    <title>Tailwindcss+alpinejs示例</title></head><body>    <div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">        <div class="relative py-3 sm:max-w-xl sm:mx-auto">            <div class="absolute inset-0 bg-gradient-to-r from-cyan-400 to-light-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"></div>            <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20">                <div class="max-w-md mx-auto">                    <div>                        <img src="https://play.tailwindcss.com/img/logo.svg" class="h-7 sm:h-8" />                    </div>                    <div class="divide-y divide-gray-200">                        <div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7">                            <p>An advanced online playground for Tailwind CSS, including support for things like:</p>                            <ul class="list-disc space-y-2">                                <li class="flex items-start">                                    <span class="h-6 flex items-center sm:h-7">                        <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">                          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />                        </svg>                      </span>                                    <p class="ml-2">                                       Customizing your                                        <code class="text-sm font-bold text-gray-900">tailwind.config.js</code> file                                    </p>                                </li>                                <li class="flex items-start">                                    <span class="h-6 flex items-center sm:h-7">                        <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">                          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />                        </svg>                      </span>                                    <p class="ml-2">                                       Extracting classes with                                        <code class="text-sm font-bold text-gray-900">@apply</code>                                    </p>                                </li>                                <li class="flex items-start">                                    <span class="h-6 flex items-center sm:h-7">                        <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">                          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />                        </svg>                      </span>                                    <p class="ml-2">Code completion with instant preview</p>                                </li>                            </ul>                            <p>Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online.</p>                        </div>                        <div class="pt-6 text-base leading-6 font-bold sm:text-lg sm:leading-7">                            <p>Want to dig deeper into Tailwind?</p>                            <p>                                <a href="https://tailwindcss.com/docs" class="text-cyan-600 hover:text-cyan-700"> Read the docs → </a>                            </p>                        </div>                    </div>                </div>            </div>        </div>    </div>    <script src="./node_modules/alpinejs/dist/alpine.js"></script></body></html>

注：html 代码内容来自
https://play.tailwindcss.com/

十. 点击 vscode 上的 Go Live，浏览器会访问 'http://localhost:5500',页面内容与 '
https://play.tailwindcss.com/' 一致。

十一. Tailwindcss 框架搭建完成，后续修改css之后，使用命令生成即可。

十二. 若要求不高，也可以直接在 '
https://play.tailwindcss.com/'网站上做开发。

参考：https://tailblocks.cc/，此网站有很多tailwindcss组件，复制代码后即可使用。

初始化Html5、Tailwindcss和Alpinejs的方案

热门阅读

推荐阅读